Error: No component factory found for DialogComponent. Did you add it to @NgModule.entryComponents?

[Bruno Bruzzano]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

In v8, lazy loaded modules' entryComponents are not discovered and injected.

Expected behavior

In v8, lazy loaded modules' entryComponents should be made available into the dependency tree.

Minimal reproduction of the problem with instructions

So I have created two stackblitz:

1. Works as expected: https://angular-8-app-example-q5erk3.stackblitz.io - (src)
2. Not working: https://angular-8-app-example-auftkp.stackblitz.io - (src)

Both apps have a lazy loaded module, a LazyComponent and a DialogContent component
In 1) the app module DialogContent component is added to the app.module's declarations array and into the entryComponents array.
In 2) the app.module is clean, whilst the lazy.module's declarations array contains the DialogContent and we added the same into the entryComponents array.

In the second stackblitz, when we click on "Show dialog" button, nothing happens and an error is thrown:

ERROR Error: No component factory found for DialogContent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (component_factory_resolver.ts:17)
    at CodegenComponentFactoryResolver.resolveComponentFactory (component_factory_resolver.ts:72)
    at DialogService.openComponent (dialog.service.ts:132)
    at DialogService.open (dialog.service.ts:110)
    at LazyComponent.show (lazy.component.ts:23)
    at Object.eval [as handleEvent] (LazyComponent.html:4)
    at handleEvent (view.ts:138)
    at callWithDebugContext (services.ts:638)
    at Object.debugHandleEvent [as handleEvent] (services.ts:379)
    at dispatchEvent (util.ts:135)

We would like to scope the DialogComponent to the LazyModule only, leaving the AppModule clean and unaware about it.

Despite we are still using Angular v8.2.14, I have also tried to give a go to Angular v10 (https://angular-8-app-example-ljj278.stackblitz.io - src) and I got the same exact result like as per 2).

Environment

Angular version: 8.2.14
@ng-neat/dialog: 1.0.3

[Toni Villena]

I'll fix it 👍

Rel: #9, #9 (comment)

[Toni Villena]

Hey @brunano21, it works as expected:

• your example doesn't work because DialogService is instantiated at root level, and it injects ComponentFactoryResolver of AppModule (no LazyModule, where DialogContent lives in VE). As a workaround to do it work in v8, you can add DialogService into LazyModule's providers. It'll create an instance of DialogService with the appropriate ComponentFactoryResolver:

import { DialogService } from '@ngneat/dialog';

@NgModule({
  providers: [DialogService],
  ...
})
export class LazyModule {}

• it works with Ivy, so I recommend you (if you can) to update to Angular >= 10. Your example doesn't work in stackblitz, but works in local.

[Bruno Bruzzano]

@tonivj5 many thanks for having looked into this. Surely upgrading to v10 or later is our my roadmap.
As you suggested I'll try to inject the DialogServices into the LazyModule's providers. I'll keep you posted - will try tomorrow.
PS: please don't close the issue until I get back to you 😁
PS2: I'm trying to think about the pros/cons of having a new instance of DialogService injected into the LazyModule too, but I'm gonna make my mind overnight 😊

[Bruno Bruzzano]

@tonivj5 I'm happy to confirm that your suggestion has worked. We are anyway planning to move forward to Angular >= 10.
Closing this. Thanks again!