Angular 7 ERROR ReferenceError: SystemJS is not defined

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 ?

I've got the same problem even using [email protected], but only when build in --prod mode, when I use ng serve it works as expected. Could you specify the mode you got error? — paranamix2
– paranamix2, Commented Nov 8, 2019 at 13:11

Alek Ps · Accepted Answer · 2018-12-10 09:08:36Z

5

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.

answered Dec 10, 2018 at 9:08

Alek Ps

663 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joel Denning · Accepted Answer · 2019-05-07 22:41:24Z

4

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.

answered May 7, 2019 at 22:41

Joel Denning

4981 gold badge3 silver badges14 bronze badges

Comments

SiddAjmera · Accepted Answer · 2018-11-15 16:00:14Z

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

Collectives™ on Stack Overflow

Angular 7 ERROR ReferenceError: SystemJS is not defined

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related