Javascript 如何将system.import（）用于组件2

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

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

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

frontOfficeA2/src/app/components/main/main.ts（3,24）：错误TS2307:找不到模块“system”

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

---

谢谢：）

事实上，当你导入东西时，SystemJS是在后台使用的。这是因为您将TypeScript编译器配置为使用它。请参阅

tsconfig.json

文件：

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

对于这样的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);
});

---

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

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

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

现在您可以导入

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

如果指定了导入映射

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

---

您已经在index.html中加载了systemjs。你不需要导入它。好吧，如果我想将外部脚本JS导入到我的组件中，我只需要使用System.import（）而不需要任何typescript导入？或者也许有一种比使用SystemJS将外部脚本JS导入到特定组件更好的方法？这并不能回答所提出的问题，对吗？这是对幕后发生的事情的解释，但没有解释如何导入外部组件。@Mathieualain:这方面有什么更新吗？我已经将systemjs包包含在我的systemjs配置文件中（尽管这样做似乎荒谬且没有必要），并且我尝试使用System.import（），但编译器无法找到systemjs和系统模块。@Pastafarian我无法在我的组件中使用System.import（），我最终使用“导入”并在我的组件中使用外部库；）我不知道这个解决方案是否能满足您的需求？在角度应用中，系统是未定义的。

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