Angular 2 Import benutzerdefinierte Komponente nicht gefunden

Question

Ich versuche, eine neu erstellte Komponente zu importieren, die im selben Stammverzeichnis wie die app.ts ist.

/ 
-app.js 
-mock_feed_service.js 

In app.ts:

import { mock_item_feed } from 'mock_feed_service'; 

Fehlermeldung:

angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:63342/mock_feed_service(…) 

Das Problem scheint zu sein, dass der mock_feed_service Aufruf die Erweiterung .js fehlt damit der Browser es nicht finden kann, .

<script> 
 
    System.config({ 
 
     packages: { 
 
      app: { 
 
       format: 'register', 
 
       defaultExtension: 'js', 
 
      }, 
 
     }, 
 
    }); 
 
    System.import('app.js') 
 
      .then(null, console.error.bind(console)); 
 
</script>

Ich habe hinzuzufügen versucht: "defaultJSExtensions": true,

, die die NOT FOUND Ausgabe für dieses Modul zu beheben scheint, aber dann bricht alle meine anderen Einfuhren (rxjs/angular2 usw.) .

z.B.

system.src.js:1085 GET http://rxjs/Rx.js 404 (Not Found) 

Answer 1

Nach Ihrer SystemJS Konfiguration, müssen Sie Ihre Typoskript Dateien unter einem app Ordner abzulegen. Andernfalls wird die im Block packages (app) angegebene Konfiguration nicht angewendet und die Erweiterung js wird nicht an Modulnamen angehängt, um entsprechende JS-Dateien zu ermitteln.

Und importieren Sie Ihre Komponente auf diese Weise:

import { mock_item_feed } from './mock_feed_service'; 

Auch die Art und Weise aktualisieren Sie die app Modul importieren:

<script> 
    System.config({ 
    packages: { 
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     }, 
    } 
    }); 
    System.import('app/app') // <----------- 
     .then(null, console.error.bind(console)); 
</script>