How could I use a system.import() into component angular 2

Question

I saw in this post that you can use SystemJS to load external javascript files into my components in Angular 2.

In my index.html :

<script>
        System.config({
            packages: {
                "frontOfficeA2/src": {
                    format: 'register',
                    defaultExtension: 'js'
                },
                "angular2-jwt": {
                    "defaultExtension": "js"
                },
                "ng2-bootstrap": {
                    "defaultExtension": "js"
                },
                "system": {
                    "defaultExtension": "js"
                }
            },
            map: {
                "angular2-jwt": "lib/angular2-jwt",
                "ng2-bootstrap": "lib/ng2-bootstrap",
                "moment": 'lib/moment/moment.js',
                "system": 'lib/systemjs/dist/system.src.js'
            }
        });
        System.import('frontOfficeA2/src/app.js').then(null, console.error.bind(console));
    </script>

And my component :

import {Component} from 'angular2/core';
import { DATEPICKER_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
import { System } from 'system';

@Component({
  selector: 'main',
  templateUrl: 'app/components/main/main.html',
  styleUrls: ['app/components/main/main.css'],
  providers: [],
  directives: [DATEPICKER_DIRECTIVES],
  pipes: []
})
export class Main {
    date: Date = new Date();
    constructor() {
        System.import('path/to/your/file').then(refToLoadedScript => {
            refToLoadedScript.someFunction();
        });
    }
}

Finally, when I start my app :

frontOfficeA2/src/app/components/main/main.ts(3,24): error TS2307: Cannot find module 'system'.

If somebody have an idea of what am I doing wrong .. :)

Thanks :)

Answer 1

You can use systemjs to do your external dependency loading.

npm i systemjs --save-dev
npm i @types/systemjs --save-dev

You'll need to update your tsconfig.app.json file (tsconfig.json file for older versions of Angular).

"types": ["systemjs"]

Now you'll be able to import

System.import("your-url").then(response => response.methodCall());

If you have an import map specified

<script type="systemjs-importmap">
 {
  "imports": {
    "import-name": "external-code-url",
  }
 }
</script>

You can instead call this code

System.import("import-name").then(response => responce.methodCall());