Angular 6 display components of a lazy loaded module

Question

I am having issues with loading a component from a lazy loaded module, using Angular 6.

I created a library using the CLI - ng generate library @org/chat

Updated angular.json file to include:

"lazyModules": [
   "dist/org/chat"
],

and then loading the module successfully via AppComponent:

constructor(private _injector: Injector, private loader: SystemJsNgModuleLoader, public dialog: MatDialog) {}

load() {
   this.loader.load('dist/org/chat#ChatModule').then(moduleFactory => {
    const moduleRef = moduleFactory.create(this._injector);
   });
}

So far so good and the module is being loaded.

However, the ChatModule has a component called ChatPopupComponent and I can't find a way to show it using a dialog (or by adding it to a ViewChild container).

In order to open a component in a dialog it needs to be declared under the module's entryComponents plus imported at the AppComponent level:

 let dialogRef = this.dialog.open(ChatPopupComponent
     data: {}
  });

But when importing the component directly (and exporting it from the library) I get the following (obvious) error: 'Component ChatPopupComponent is not part of any NgModule or the module has not been imported into your module'. Since it is a lazy loaded module, it is clearly not imported yet.

When I try the following:

   let name: any = 'ChatPopupComponent';
   let dialogRef = this.dialog.open(name
         data: {}
      });

I get the following error - error loading module Error: No component factory found for EmailPopUpComponent. Did you add it to @NgModule.entryComponents?

It seems that the only way to show a component is by importing the module within the app.module.ts, although it defies the goal of having a lazy loaded module.

Is there a way to do the above or am I missing something rudimental about lazy loading modules & components?

Have you added this component in the exports of your org/chat NgModule? — eduPeeth

lolcatzftw lolcatzftw · Accepted Answer · 2019-05-01T05:06:55

try to declare the ChatPopupComponent as a separate module..

chat-popup.component.ts

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [ChatPopupComponent],
    exports: [ChatPopupComponent],
})
export class ChatPopupModule { }

..do the same for the EmailPopupComponent..

email-popup.component.ts

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [EmailPopupComponent],
    exports: [EmailPopupComponent],
})
export class EmailPopupModule { }

..and add both modules to the ChatModule imports as well as the entryComponents array..

chat.module.ts

@NgModule({
    imports: [
        CommonModule,
        ...
        ChatPopupModule,
        EmailPopupModule,
    ],
    declarations: [
        ...
    ],
    entryComponents: [
        ChatPopupComponent,
        EmailPopupComponent,
    ]
})
export class ChatModule { }

Angular 6 display components of a lazy loaded module

3 Answers