Question

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

我的Angular2-App有一个单独的Layoutview，所以我可以在MVC和NG2-App之间切换。在这个Layoutview中，我已经像NG2-Get Started Tutorial中那样设置了head-element：

<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"
    ]
}

我正在尝试使用两个第三方组件：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。他们为什么表现不同？ libs没有遵循任何约定，或者我在这里做错了什么？

接下来我不明白的是，它们都不起作用。对于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

1 个答案: