Question

我在this post中看到你可以使用SystemJS将外部javascript文件加载到Angular 2中的组件中。

在我的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>

我的组件：

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();
        });
    }
}

最后，当我启动我的应用时：

frontOfficeA2 / src / app / components / main / main.ts（3,24）：错误TS2307：找不到模块＆＃39; system＆＃39;。

如果有人知道我做错了什么......：）

谢谢：）

Answer 1

事实上，导入东西时会使用SystemJS。这是因为您配置了TypeScript编译器以使用它。请参阅tsconfig.json文件：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",  <---------------
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

如果您查看已编译的JS文件（这些JS文件实际上是在浏览器中执行的），您会看到：

System.register(['angular2/platform/browser', 'angular2/http', './app.component'], function(exports_1) {
  var browser_1, http_1, app_component_1;
  return {
    setters:[
        function (browser_1_1) {
            browser_1 = browser_1_1;
        },
        function (http_1_1) {
            http_1 = http_1_1;
        },
        function (app_component_1_1) {
            app_component_1 = app_component_1_1;
        }],
    execute: function() {
        browser_1.bootstrap(app_component_1.AppComponent, [http_1.HTTP_PROVIDERS]).then(function (componentRef) {
            console.log(componentRef.injector);
        });
    }
  }
});

对于像这样的TypeScript文件：

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [ HTTP_PROVIDERS ]).then((componentRef) => {
  console.log(componentRef.injector);
});

Answer 2

您可以使用systemjs进行外部依赖项加载。

npm i systemjs --only=dev
npm i @types/systemjs --only=dev

您需要更新tsconfig.app.json文件（对于较旧的Angular版本，则为tsconfig.json文件）。

"types": ["systemjs"]

现在您可以导入

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

如果您指定了导入地图

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

您可以改为调用此代码

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

我怎么能将system.import（）用于组件角度2

2 个答案: