In the process of developing an Angular 7 project with systemjs for dynamic module loading, I encountered an issue.
Upon attempting to utilize it, I encountered the following error:
ERROR ReferenceError: SystemJS is not defined
Within my package.json file, the version of systemjs specified is 2.1.1
In order to address this, I included the path to system.js in the scripts section of my angular.json file
"./node_modules/systemjs/dist/system.js"
To make use of SystemJs within my service, I declared it as follows:
declare const SystemJS;
The implementation of SystemJs within a function looks like this:
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;
});
});
}
If there's anything that I've overlooked, any guidance on resolving this issue would be greatly appreciated.