对 moduleloader (system.js) 和 Typescript 感到困惑

Question

我正在将 ASP.Net MVC 应用程序转换为 Angular2，但有一些我不理解的奇怪行为。

我的 Angular2 - App 有一个单独的 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"
    ]
}

我正在尝试使用两个第 3 方组件：angular2-modal and 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可以找到。为什么他们的行为不同？这些库是否没有遵循任何约定，或者我在这里做错了什么？

接下来我不明白的是，其中 none 正在工作。对于 angular2-modal，我必须明确引用一个 js 文件，而 ng2-img-cropper 根本不起作用。

虽然我使用了像 system.js 这样的模块加载器，但为什么我还需要引用任何东西？ ng2-img-cropper 有什么问题？ node_modules/ng2-img-cropper文件夹中没有js文件，我必须先编译吗？我觉得我很奇怪。

Answer 1

实际上有两个截然不同的部分：

IDE 依赖于图书馆合同的类型（文件 d.ts）。如果它可以描述事物或代码与它们不匹配，您将在编辑器中或在编译 TypeScript 文件时看到错误
在运行时，这些文件不适用，模块加载器 (SystemJS) 负责根据名称导入模块（从 JS 文件，模块按名称注册）

对 moduleloader (system.js) 和 Typescript 感到困惑

Confused about moduleloader (system.js) and Typescript

typescript

systemjs

angular