Come potrei usare uno system.import() nel componente angolare 2

Question

ho visto in this post che è possibile utilizzare SystemJS per caricare i file JavaScript esterno nelle mie componenti angolare 2.

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

E la mia componente:

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

Infine, quando inizio la mia app:

frontOfficeA2/src/app/components/main/main.ts (3,24): errore TS2307: impossibile trovare il 'sistema' del modulo.

Se qualcuno ha un'idea di quello che sto facendo male .. :)

Grazie :)

Answer 1

Infatti, SystemJS viene utilizzato sotto il cofano quando si importano le cose. È perché hai configurato il compilatore TypeScript per usarlo. Vedere il file tsconfig.json:

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

Se si dispone di uno sguardo al file JS compilati (questi JS file vengono effettivamente eseguiti nel browser), si vedrà questo:

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

per un file typescript come this:

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