Angular - 将mat对话框封装到模块中

Question

I have a dialog that I want to share across different parts of my app. Different components in different modules should all be able to trigger this same dialog and the logic that goes with it. The logic of interacting with the dialog is embedded within a service that also handles what to do with the user's inputs. The dialog is invoked by calling a method of the service.

This dialog component has no business being declared at the Application level. That is poor encapsulation. The dialog should only be accessed by the Service, so it should only be visible TO the service. Therefore, I should declare it in the same module as the service.

I've declared and exported the component in my module, like so:

@NgModule({
  imports:      [ ... ],
  declarations: [ NewItemComponent ],
  exports:      [ NewItemComponent ]
})
export class SharedServicesModule {
  static forRoot(): ModuleWithProviders {
    return { 
      ngModule: SharedServicesModule,
      providers: [ ... ]
    }
  }
}

And I referenced it in the app.module.ts , like so:

@NgModule({
  declarations:    [ ... ],
  imports:         [ SharedServicesModule.forRoot(), ... ],
  entryComponents: [ NewItemComponent ],
  bootstrap:       [ AppComponent ]
})

Unfortunately, that doesn't seem to be working.

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

I tried adding it to entryComponents at the module level. To both. And even to the modules that are consuming the dialog via the service. To no avail.

What is the right way to make this work?

Or have I run into this: https://github.com/angular/angular/issues/14324

Answer 1

I don't know if it is the ideal solution, but I found a solution. I don't understand why this works, and what I tried earlier didn't, but I have working code, so I'm going to leave it alone...

I created a stand-alone module to hold the dialog component, which includes the entryComponents entry, like so:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    MaterialDesignModule
  ],
  declarations:    [ NewItemDialogComponent ],
  exports:         [ NewItemDialogComponent ],
  entryComponents: [ NewItemDialogComponent ]  // <-- NOTICE!
})
export class NewItemDialogModule { }

Then I import that module into the module that is going to use it:

@NgModule({
  imports: [
    CommonModule,
    NewItemDialogModule   // <-- HERE
  ]
})
export class SharedServicesModule { 
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedServicesModule,
      providers: [ ... ]      
    };
  }
}

I did NOT have to import the dialog into the app.module , which was the goal.

If anybody knows why it didn't work when everything was directly in the SharedServicesModule , do tell.

Answer 2

Your NewItemComponent is under SharedServicesModule ,

But you are doing entryComponents: [ NewItemComponent ] in app.module.ts. here is the problem. You should do it in SharedServicesModule not in AppModule .

Add entryComponents: [ NewItemComponent ] in SharedServicesModule , so the code is

@NgModule({
  imports:      [ ... ],
  declarations: [ NewItemComponent ],
  exports:      [ NewItemComponent ],
  entryComponents: [ NewItemComponent ] // it is here in the **SharedServicesModule** 
})

export class SharedServicesModule {
  static forRoot(): ModuleWithProviders {
    return { 
      ngModule: SharedServicesModule,
      providers: [ ... ]
    }
  }
}

Remove entryComponents: [ NewItemComponent ] from app.module.ts as this component is not under this module.

@NgModule({
  declarations:    [ ... ],
  imports:         [ SharedServicesModule.forRoot(), ... ],
  bootstrap:       [ AppComponent ]
})