After reading an intriguing article about the concept of dynamic component loading:
I am interested in learning more about the use of System.import. The author demonstrates a specific syntax for loading the JavaScript file of the module that needs to be dynamically loaded.
System.import('../module1.module.js').then((module) => {
this.compiler.compileModuleAndAllComponentsAsync(module.Module1Module)
.then((compiled) => {
const factory = compiled.componentFactories[0];
this.container.createComponent(factory);
});
});
I comprehend that System.import is utilized for dynamically loading modules during runtime.
In our scenario, we specify the name of the TypeScript (.ts) file for the module, knowing that the corresponding JavaScript file will share the same name and can be provided as a parameter in the import function.
However, I am curious if it's possible to provide a generic JavaScript file as a parameter that may contain multiple modules and components (potentially sourced from external projects/libraries), specifying one of the modules for component creation, like so:
System.import('../main-app1.js').then((module) => {
this.compiler.compileModuleAndAllComponentsAsync(module.Module1Module)
.then((compiled) => {
const factory = compiled.componentFactories[0];
this.container.createComponent(factory);
});
});
I attempted the above approach, but unfortunately, it did not work as expected and encountered a runtime error:
core.js:9110 ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'undefined'.
Error: No NgModule metadata found for 'undefined'.