關於moduleloader（system.js）和Typescript的困惑

我正在將一個ASP.Net MVC應用程序轉換爲Angular2，並且存在一些我不明白的奇怪行爲。關於moduleloader（system.js）和Typescript的困惑

我的Angular2應用程序有一個獨立的Layoutview，所以我可以在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-modal，但可以找到cropper。他們爲什麼表現不同？這些庫不遵循任何慣例，或者我在這裏做錯了什麼？

接下來我不明白的是，他們都沒有工作。對於angular2-modal，我必須明確引用js文件，而ng2-img-cropper根本不起作用。

爲什麼我需要引用任何東西，儘管我使用像system.js這樣的moduleloader？和ng2-img-cropper有什麼問題？ node_modules/ng2-img-cropper文件夾中沒有js文件，我必須先編譯它嗎？我看起來很奇怪。

來源

2016-04-09 Weissvonnix

其實有兩個不同的不同的部分：

IDE依靠分型圖書館的合同（文件d.ts）。如果事情描述或代碼與它們不匹配，則會在編輯器中或編譯TypeScript文件時看到錯誤
在運行時，這些文件不適用，並且模塊加載器（SystemJS）負責根據名稱導入模塊（來自JS文件，模塊註冊名稱）

來源

2016-04-09 18:37:03

因此，IDE使用類型，system.js從js文件導出模塊和ts編譯器moduleResolution選項？ – Weissvonnix

ts編譯器將TS文件編譯成JS文件（這裏涉及類型）。 SystemJS根據模塊名稱加載這些JS文件。 IDE還編譯TS文件並顯示錯誤（此處涉及類型）。 –

感謝您的澄清。是否有與包裝一起自動加載類型的工具？可以像jspm這樣的東西在這裏幫助保持一切同步嗎？什麼是像ng2-img-cropper這樣的庫？我是否需要在node_modules -folder內編譯它以獲取js文件？ – Weissvonnix

關於moduleloader（system.js）和Typescript的困惑

回答

相關問題