मैं कैसे में एक system.import() इस्तेमाल कर सकते हैं घटक कोणीय 2

Question

मैं this post में देखा था कि तुम मेरी index.html में कोणीय 2.

में मेरी घटकों में बाहरी जावास्क्रिप्ट फ़ाइलों को लोड करने SystemJS उपयोग कर सकते हैं:

<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/घटक/main/main.ts (3,24): त्रुटि TS2307: मॉड्यूल 'सिस्टम' नहीं मिल सका।

तो किसी को क्या मैं गलत कर रहा हूँ की एक विचार है .. :)

धन्यवाद :)

Answer 1

वास्तव में, SystemJS हुड के नीचे किया जाता है जब आप चीजों को आयात करते हैं। ऐसा इसलिए है क्योंकि आपने इसका उपयोग करने के लिए अपने टाइपस्क्रिप्ट कंपाइलर को कॉन्फ़िगर किया है। tsconfig.json फ़ाइल देखें: की तरह एक टाइपप्रति फ़ाइल के लिए

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

: आप संकलित जे एस फ़ाइलें पर एक नजर है, तो

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

(इन जे एस फ़ाइलें वास्तव में ब्राउज़र में क्रियान्वित कर रहे हैं), तो आप इस देखेंगे यह:

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