Làm thế nào tôi có thể sử dụng một system.import() vào phần góc 2

Question

tôi thấy trong this post mà bạn có thể sử dụng SystemJS để tải các tập tin javascript bên ngoài vào thành phần của tôi trong góc 2.

Trong index.html của tôi:

<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> 

Và thành phần của tôi:

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(); 
     }); 
    } 
} 

Cuối cùng, khi tôi bắt đầu ứng dụng của mình:

frontOfficeA2/src/app/thành phần/main/main.ts (3,24): lỗi TS2307: Không thể tìm thấy mô-đun 'hệ thống'.

Nếu ai đó có một ý tưởng về những gì tôi làm sai .. :)

Cảm ơn :)

Answer 1

Trong thực tế, SystemJS được sử dụng dưới mui xe khi bạn nhập điều. Đó là vì bạn đã cấu hình trình biên dịch TypeScript của mình để sử dụng nó. Xem tsconfig.json file:

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

Nếu bạn có một cái nhìn tại các file JS biên dịch (những JS tập tin thực sự được thực hiện trong trình duyệt), bạn sẽ thấy điều này:

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); 
     }); 
    } 
    } 
}); 

cho một tập tin typescript như điều này:

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); 
});