Verwirrt über Modullader (system.js) und Typoskript

Question

Ich konvertiere eine ASP.Net MVC-Anwendung zu Angular2 und es gibt ein seltsames Verhalten, das ich nicht verstehe.

Ich habe eine separate Layoutansicht für meine Angular2 - App, damit ich zwischen MVC und NG2-App wechseln kann. In diesem Layoutview Ich habe den Kopf-Element wie in der NG2-Get Tutorial Schritte ein:

<script src="/node_modules/es6-shim/es6-shim.min.js"></script> 

<script src="/node_modules/systemjs/dist/system-polyfills.js"></script> 
<script src="/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 


<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="/node_modules/systemjs/dist/system.src.js"></script> 
<script src="/node_modules/rxjs/bundles/Rx.js"></script> 
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script> 
<script src="/node_modules/angular2/bundles/http.dev.js"></script> 
<script src="/node_modules/angular2/bundles/router.dev.js"></script>  
<script> 
    System.config({ 
     defaultJSExtension: true, 
     packages: { 
      "app": { 
       format: 'register', 
       defaultExtension: 'js', 
      } 
     } 
    }); 
    System.import('app/main') 
      .then(null, console.error.bind(console)); 
</script> 

Und das ist mein tsconfig.json:

{ 
    "compileOnSave": true, 
    "compilerOptions": { 
     "target": "es5", 
     "module": "system", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "removeComments": false, 
     "noImplicitAny": false, 
     "rootDir": "app" 

    }, 
    "exclude": [ 
     "node_modules", 
     "typings/main", 
     "typings/main.d.ts" 
    ] 
} 

Ich versuche zu verwenden, um zwei 3.- Party-Komponenten: angular2-modal und ng2-img-cropper. Dies sind meine Importe:

import {ModalDialogInstance, ModalConfig, Modal, ICustomModal, 
    YesNoModalContent, YesNoModal} from 'angular2-modal'; 
import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper/src/imageCropper'; 

Die IDE kann das angular2-modal nicht finden, aber der cropper kann gefunden werden. Warum verhalten sie sich anders? Folgen die Bibliotheken keiner Konvention oder mache ich hier etwas falsch?

Das nächste, was ich nicht verstehe ist, keiner von ihnen funktioniert. Für angular2-modal muss ich explizit auf eine js-Datei verweisen und der ng2-img-cropper funktioniert überhaupt nicht.

Warum muss ich irgendetwas referenzieren, obwohl ich einen Modullader wie system.js verwende? Und was ist das Problem mit ng2-img-cropper? Es gibt keine js-Dateien im Ordner node_modules/ng2-img-cropper, muss ich das zuerst kompilieren? Ich finde mich seltsam.

Answer 1

In der Tat gibt es zwei verschiedene unterschiedliche Teile:

• Der IDE basiert auf Typisierungen für Bibliotheks Verträge (Dateien d.ts). Wenn es Beschreibungen gibt oder der Code nicht mit ihnen übereinstimmt, sehen Sie Fehler in Ihrem Editor oder beim Kompilieren Ihrer TypeScript-Dateien.
• Zur Laufzeit gelten diese Dateien nicht und der Modullader (SystemJS) ist dafür verantwortlich Import von Modulen nach Namen (aus einer JS-Datei, mit Modul registriert nach Name)