Search code examples
typescriptangularsystemjs

Confused about moduleloader (system.js) and Typescript

I am converting a ASP.Net MVC application to Angular2 and there is some strange behavior I don't understand.

I have a seperate Layoutview for my Angular2 - App, so I can switch between MVC and NG2-App. In this Layoutview I have set up the head-element like in the NG2-Get Started Tutorial:

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

And this is my 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"
    ]
}

I am trying to use two 3rd-party components: angular2-modal and ng2-img-cropper. These are my imports:

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

The IDE can not find the angular2-modal, but the cropper can be found. Why do they behave different? Are the libs not following any convention or am I doing something wrong here?

The next thing I don't understand is, none of them are working. For angular2-modal I have to reference a js file explicitly and the ng2-img-cropper is not working at all.

Why do I need to reference anything although I use a moduleloader like system.js? And what is the problem with ng2-img-cropper? There are no js-files inside the node_modules/ng2-img-cropper folder, do I have to compile that first? I seems odd to me.

Solution

  • In fact there are two distinct different parts:

    • The IDE relies on typings for library contracts (files d.ts). If it can thing descriptions or the code doesn't match with them, you will see errors in your editor or when compiling your TypeScript files
    • At runtime, these files don't apply and the module loader (SystemJS) is responsible to import modules according to names (from a JS file, with module registered by name)