A situation arose where I needed to lazy load a popups module outside of the regular router lazy-loading. In order to achieve this, I made the following adjustments:
angular.json
"architect": {
"build": {
...
"options": {
...
"lazyModules": ["src/popup-components/popups.module"],
...
}
}
}
I included the module in the lazyModules section of the angular.json file to inform Angular to bundle it separately.
popups.module
import { NgModule } from '@angular/core';
...
@NgModule({
imports: [CommonModule],
declarations: [
...
],
entryComponents: [
...
]
...
})
export default class PopupModule {}
app.component
@ViewChild('entry', { read: ViewContainerRef, static: true }) entry: ViewContainerRef
...
constructor(
private _loader: NgModuleFactoryLoader,
private _injector: Injector
) { }
...
// takes the popup compenent to render as an argument
loadModule(popupComponent) {
this._loader.load('src/popup-components/popups.module').then(moduleFactory => {
const moduleRef = moduleFactory.create(this._injector).instance;
const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(popupComponent);
this.entry.createComponent(compFactory);
});
}
On running ng serve, everything works as expected without any errors. However, when I run ng build --prod, I encounter the following errors:
ERROR in ./src/popup-components/popups.module.ngfactory.js 58:64-79 "export 'PopupsModule' (imported as 'i1') was not found in './popups.module' ERROR in ./src/popup-components/popups.module.ngfactory.js 58:8885-8900 "export 'PopupsModule' (imported as 'i1') was not found in './popups.module' ERROR in ./src/popup-components/popups.module.ngfactory.js 58:8902-8917 "export 'PopupsModule' (imported as 'i1') was not found in './popups.module'
After reviewing the code in the popups.module, I noticed that I used export default class instead of the standard export default. Removing 'default' resolves the issue during production builds with ng build --prod, but it breaks dynamic loading of the module resulting in the error message when attempting to run the loadModule() method:
console.js:35 ERROR Error: Uncaught (in promise): Error: Cannot find 'default' in 'src/popup-components/popups.module'
At this point, I am unsure of the next steps to take as I have not come across any resources addressing this specific issue.
If anyone can offer assistance or guidance, it would be greatly appreciated!