如何将组件导入 Angular 中的服务 class

Question

我正在尝试创建一个 Angular 对话框。为此，我将一个组件导入到服务 class 中，但出现以下错误。我正在使用不同的模块并在该模块上添加了一个入口组件

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

 }


 }

我收到以下错误。我在密码模块中添加了入口组件，但仍然出现此错误

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

Answer 1

将 NewPasswordModule 导入到 AppModule 模块

imports: [
  BrowserModule,
  AppRoutingModule,
  NewPasswordModule
 ],

Answer 2

我认为您观察到的行为在 github issue 中有所描述：延迟加载模块的入口组件在根级注入器中不可用。

因此您需要在 NewPasswordModule 中提供使用入口组件的服务，而不是 AppModule。

如果您正在寻找更通用的方法（假设您想在许多惰性加载模块中使用该服务），您可以看看这个 suggested solution，它创建了一个通用服务，它是然后继承并提供延迟加载功能模块。

如何将组件导入 Angular 中的服务 class

How to import component in to a Service class in Angular

angular

typescript

angular-ui-router