Issue lazy loading module with NgMoudleFactoryLoader Angular 8

Question

I have a popups module that I wanted to lazy load outside of the regular router lazy-loading so I have done the following

angular.json

"architect": {
  "build": {
    ...
    "options": {
      ...
      "lazyModules": ["src/popup-components/popups.module"],
      ...
    }
  }
}

Added the module to the lazyModules in the angular.json so angular knows to bundle it seperately

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

now when I run ng serve all this works as expected, no errors or anything... but when I run ng build --prod I get 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'

Now if you noticed above in the popups.module I am using export default class instead of the regular export default If I remove default my app builds fine running ng build --prod but the dynamic loading of the module no longer works I get this error when I try and run the loadModule() method

console.js:35 ERROR Error: Uncaught (in promise): Error: Cannot find 'default' in 'src/popup-components/popups.module'

I'm not sure what to do from here I cant find any resources of a similar issue

Any help would be appreciated!

Answer 1

Okay so I was actually able to solve this issue heres what I did:

In my loadModule() function in the .load() section I needed to do the following

this._loader.load('src/popup-components/popups.module#PopupsModule)

so this looks similar to the old (pre Angular 8) way of lazy loading routing components so the # is used to denote where our file path ends and to tell the load function the name of the PopupsModule

then I also had to change

const moduleRef = moduleFactory.create(this._injector).instance;

to

const moduleRef = moduleFactory.create(this._injector);

and now the project builds fine using ng build --prod