Angular 7 错误参考错误：未定义 SystemJS答案

【问题标题】：Angular 7 ERROR ReferenceError: SystemJS is not definedAngular 7 错误参考错误：未定义 SystemJS
【发布时间】：2019-04-18 18:17:53
【问题描述】：

我正在使用 systemjs 创建一个 Angular 7 项目以动态加载模块。

当我尝试使用它时，我遇到了这个错误：

 ERROR ReferenceError: SystemJS is not defined

我的 package.json 包含 systemjs: 2.1.1

我在 angular.json 中添加了 systemjs 路径到部分脚本

"./node_modules/systemjs/dist/system.js"

我声明 SystemJs 在我的服务中使用它：

declare const SystemJS;

我正在尝试像这样在这个函数中使用：

loadModuleSystemJS(moduleInfo: ModuleData): Promise<any> {
    const url = this.source + moduleInfo.location;
    SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
    SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));
    SystemJS.set('@angular/router', SystemJS.newModule(AngularRouter));
    SystemJS.set('@angular/platform-browser/animations', SystemJS.newModule(BrowserAnimations));

    // now, import the new module
    return SystemJS.import(`${url}`).then((module) => {
      return this.compiler.compileModuleAndAllComponentsAsync(module[`${moduleInfo.moduleName}`]).then(compiled => {
        return module;
      });
    });
  }

也许我错过了什么，

你能帮帮我吗？

【问题讨论】：

即使使用 systemjs@0.21.5 我也遇到了同样的问题，但只有在 --prod 模式下构建时，当我使用 ng serve 时，它才能按预期工作。你能指定你遇到错误的模式吗？

标签： angular typescript systemjs angular7

【解决方案1】：

请务必使用此版本： https://github.com/systemjs/systemjs/releases/tag/0.21.5 据我所知，2.1.1 与过去的 api 不兼容。顺便说一句，在上述答案的示例中，使用的是“0.21.4 Dev”版本。

【讨论】：

【解决方案2】：

我在相应的 github 问题中回答了这个问题：https://github.com/systemjs/systemjs/issues/1940#issuecomment-490280011

tldr: systemjs@window.SystemJS 全局变量，但 systemjs@>=2 没有。使用window.System 或System 而不是SystemJS。您还需要 follow the instructions in the systemjs readme 让您的 webpack 配置不与 System.import() 调用混淆。

【讨论】：

【解决方案3】：

从 Angular 6 开始，您必须提供来自 node_modules 的绝对路径。像这样的：

{
  ...
  "projects": {
    "demo": {
      ...,
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "scripts": [ "node_modules/systemjs/dist/system.js" ]
          },
          ...
        },
        ...
      }
    }
  },
  ...
}

这里有一个Sample StackBlitz 供您参考。

请注意，我在 app.component.ts 中使用过它，我正在记录 typeof SystemJS.set

【讨论】：