Angular 7 ERROR ReferenceError：未定义SystemJS

Question

I'm creating an angular 7 project with systemjs to load dynamically a module.

When I try to use it, I have this error:

 ERROR ReferenceError: SystemJS is not defined

My package.json contain systemjs: 2.1.1

I added systemjs path to section scripts in my angular.json

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

I declared SystemJs to use it in my service:

declare const SystemJS;

and I'm trying to using like this, in this function:

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

Maybe I've missed something,

Can you help me ?

Answer 1

Be sure to use this release: https://github.com/systemjs/systemjs/releases/tag/0.21.5 2.1.1 is not compatible with past api, as far as I can tell. By the way, in the example from the answer above, however, the version "0.21.4 Dev" is used.

Answer 2

Since Angular 6, you have to provide the absolute path from node_modules . Something like this:

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

Here's a Sample StackBlitz for your ref.

Note that I've used it in app.component.ts where I'm logging the typeof SystemJS.set

Answer 3

I answered this in the corresponding github issue: https://github.com/systemjs/systemjs/issues/1940#issuecomment-490280011

tldr: systemjs@<2 had a window.SystemJS global variable, but systemjs@>=2 does not. Use window.System or System instead of SystemJS . You'll also need to follow the instructions in the systemjs readme about getting your webpack config to not mess with the System.import() calls.