Confused about moduleloader (system.js) и typescript

Question

Я конвертирую приложение ASP.Net MVC в Angular2, и есть странное поведение, которое я не понимаю.

У меня есть отдельный Layoutview для моего Angular2 - App, поэтому я могу переключаться между MVC и NG2-App. В этом Layoutview я создал головной элемент, как в NG2-НАЧАТЬ Учебное пособие:

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

И это мой 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" 
    ] 
} 

Я пытаюсь использовать два 3rd- сторонних компонентов: angular2-modal и ng2-img-cropper. Это мои импорт:

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

В среде IDE не может найти angular2 покадрово, но промахнулись можно найти. Почему они ведут себя иначе? Являются ли библиотеки не соответствующими какой-либо конвенции, или я делаю что-то неправильно здесь?

Следующее, что я не понимаю, ни один из них не работает. Для angular2-modal я должен явно ссылаться на файл js, и ng2-img-cropper вообще не работает.

Почему мне нужно ссылаться на что угодно, хотя я использую модуль loader like system.js? И в чем проблема с ng2-img-cropper? В папке node_modules/ng2-img-cropper нет js-файлов, нужно ли сначала его скомпилировать? Мне кажется странным.

Answer 1

На самом деле есть два различных частей:

• Среда IDE опирается на типизации для библиотеки договоров (файлы d.ts). Если это может быть описание вещей или код не совпадает с ними, вы увидите ошибки в своем редакторе или при компиляции файлов TypeScript
• Во время выполнения эти файлы не применяются, и загрузчик модуля (SystemJS) несет ответственность за импортировать модули в соответствии с именами (из файла JS, с модулем, зарегистрированным по имени)