Angular 7错误ReferenceError:未定义SystemJS

时间:2018-11-15 15:40:39

标签: angular typescript systemjs angular7

我正在使用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;
      });
    });
  }

也许我错过了一些事情,

你能帮我吗?

3 个答案:

答案 0 :(得分:2)

自Angular 6起,您必须提供从node_modules开始的绝对路径。像这样:

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

这是您推荐的Sample StackBlitz

请注意,我已在app.component.ts的{​​{1}}中使用过它

答案 1 :(得分:2)

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

答案 2 :(得分:0)

我在相应的github问题中对此回答:https://github.com/systemjs/systemjs/issues/1940#issuecomment-490280011

tldr:systemjs @ <2有一个window.SystemJS全局变量,而systemjs @> = 2没有。使用window.SystemSystem代替SystemJS。您还需要follow the instructions in the systemjs readme来获取Webpack配置,以免与System.import()调用发生冲突。