How to import component in to a Service class in Angular

Question

I am trying to create an Angular dialog box. For that, I am importing a component into a Service class but I am getting the below error. I am using a different module and have added an entry component on that module

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

newpasword/newpassword.module.ts

   import { NewPasswordRoutingModule  } from './newpassword- 
   routing.module';
   import { NewPasswordComponent  } from './newpassword.component';

   export * from './newpassword.component';

    @NgModule({
    imports: [
    CommonModule,
    NewPasswordRoutingModule

    FlexLayoutModule.withConfig({addFlexToParent: false})
   ],
    exports: [
    NewPasswordComponent
    ], 
 declarations: [NewPasswordComponent],
entryComponents: [NewPasswordComponent],

 })
 export class NewPasswordModule {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import {AppRoutingModule} from "./app-routing.module";
import { AppComponent } from './app.component';
import {SomeService} from "./shared/someservice.service";


 @NgModule({
  declarations: [
   AppComponent,

   ],
imports: [
  BrowserModule,
 AppRoutingModule,

  ],

 providers: [SomeService],
   bootstrap: [AppComponent]
  })
   export class AppModule { }

shared/someservice.service.ts

   import {MatDialog, MatDialogRef, MAT_DIALOG_DATA,MatDialogConfig} from 
  '@angular/material/dialog';
   import { NewPasswordComponent  } from 
   '../newPassword/newpassword.component';
   @Injectable()
  export class SomeService  {

 constructor(public dialog: MatDialog) {
 }




 LogIn(){


      let dialogRef: MatDialogRef<NewPasswordComponent>;
               const config = new MatDialogConfig();;
              config.role = 'dialog';
               config.width = '60%';
                config.data = { newpassword:  that.newpassword };
             dialogRef = that.dialog.open(NewPasswordComponent, config);
 console.log("Dialog Start"+email);

   dialogRef.afterClosed().subscribe(result => {
   that.newpassword = result;
     console.log("Dialog closed"+result);
  });

 }


 }

I am getting the below error. I have added entry component in a password module but still getting this error

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

Answer 1

I think the behaviour you are observing is described in that github issue: entry components of a lazy loaded module are not available at the root level injector.

So you need to provide the service that uses the entry component in your NewPasswordModule, not in AppModule.

If you are looking for a more generic approach (say you want to use that service in many lazy loaded modules), you could have a look at this suggested solution, which creates a generic service, which is then inherited and provided in lazy loaded feature modules.