Angular 7 ERROR ReferenceError：未定義SystemJS

Question

我正在使用systemjs創建一個角度7項目來動態加載模塊。

當我嘗試使用它時，我有這個錯誤：

 ERROR ReferenceError: SystemJS is not defined

我的package.json包含systemjs：2.1.1

我在angular.json中添加了systemjs路徑到section腳本

"./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;
      });
    });
  }

也許我錯過了什么，

你能幫助我嗎 ？

Answer 1

請務必使用此版本： https ： //github.com/systemjs/systemjs/releases/tag/0.21.5 2.1.1與過去的api不兼容，據我所知。 順便說一下，在上面的答案的例子中，使用版本“0.21.4 Dev”。

Answer 2

從Angular 6開始，您必須提供node_modules的絕對路徑。 像這樣的東西：

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

這是你的ref的Sample StackBlitz 。

請注意，我在app.component.ts中使用它，我正在記錄typeof SystemJS.set

Answer 3

我在相應的github問題中回答了這個問題： https ： //github.com/systemjs/systemjs/issues/1940#issuecomment-490280011

tldr：systemjs @ <2具有window.SystemJS全局變量，但systemjs @> = 2沒有。 使用window.System或System ，而不是SystemJS 。 您還需要按照systemjs自述文件中的說明進行操作，以使您的webpack配置不會弄亂System.import()調用。