我怎麼能使用system.import（）爲分量角2

Question

我this post看到，您可以使用SystemJS外部JavaScript文件加載到我的成分角2

在我的index.html：

<script> 
     System.config({ 
      packages: { 
       "frontOfficeA2/src": { 
        format: 'register', 
        defaultExtension: 'js' 
       }, 
       "angular2-jwt": { 
        "defaultExtension": "js" 
       }, 
       "ng2-bootstrap": { 
        "defaultExtension": "js" 
       }, 
       "system": { 
        "defaultExtension": "js" 
       } 
      }, 
      map: { 
       "angular2-jwt": "lib/angular2-jwt", 
       "ng2-bootstrap": "lib/ng2-bootstrap", 
       "moment": 'lib/moment/moment.js', 
       "system": 'lib/systemjs/dist/system.src.js' 
      } 
     }); 
     System.import('frontOfficeA2/src/app.js').then(null, console.error.bind(console)); 
    </script> 

而且我的組件：

import {Component} from 'angular2/core'; 
import { DATEPICKER_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; 
import { System } from 'system'; 

@Component({ 
    selector: 'main', 
    templateUrl: 'app/components/main/main.html', 
    styleUrls: ['app/components/main/main.css'], 
    providers: [], 
    directives: [DATEPICKER_DIRECTIVES], 
    pipes: [] 
}) 
export class Main { 
    date: Date = new Date(); 
    constructor() { 
     System.import('path/to/your/file').then(refToLoadedScript => { 
      refToLoadedScript.someFunction(); 
     }); 
    } 
} 

最後，當我開始我的應用程序：

frontOfficeA2/src/app/components/main/main.ts（3,24）：錯誤TS2307：找不到模塊'system'。

如果有人有什麼我做錯了一個想法.. :)

謝謝:)

Answer 1

事實上，SystemJS在引擎蓋下，當你輸入的東西使用。這是因爲你配置了TypeScript編譯器來使用它。見tsconfig.json文件：

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "system", <--------------- 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

如果你看看編譯的JS文件（這些JS文件瀏覽器實際執行），你會看到：

System.register(['angular2/platform/browser', 'angular2/http', './app.component'], function(exports_1) { 
    var browser_1, http_1, app_component_1; 
    return { 
    setters:[ 
     function (browser_1_1) { 
      browser_1 = browser_1_1; 
     }, 
     function (http_1_1) { 
      http_1 = http_1_1; 
     }, 
     function (app_component_1_1) { 
      app_component_1 = app_component_1_1; 
     }], 
    execute: function() { 
     browser_1.bootstrap(app_component_1.AppComponent, [http_1.HTTP_PROVIDERS]).then(function (componentRef) { 
      console.log(componentRef.injector); 
     }); 
    } 
    } 
}); 

像一個打字稿文件這個：

import {bootstrap} from 'angular2/platform/browser'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {AppComponent} from './app.component'; 

bootstrap(AppComponent, [ HTTP_PROVIDERS ]).then((componentRef) => { 
    console.log(componentRef.injector); 
});