How to use component from module in entryComponents another module?

Question

I have ngx-bootstrap modal component. This modal is used inside shared folder. I use this FirstModalComponent in my DashboardModule like:

// Dashboard.module.ts
import { FirstModalComponent } from '../../shared/modals/first-modal/first-modal.component';

@NgModule({
  declarations: [
    DashboardComponent
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes),
    SharedModule
  ],
  entryComponents: [
    FirstModalComponent 
  ]
});

And if I want to make my FirstModalComponent as module, how I should implement it in my DashboardModule and define it in entryComponents?

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FirstModalModule } from './first-modal/first-modal.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FirstModalModule
  ],
  exports: [
    CommonModule,
    FirstModalModule
  ]
})
export class ModalsModule { }

Then I import/export this ModalsModule in SharedModule and trying to import shared module into DashboardModule.

How can I inject my FirstModalComponent to entryComponents in Dashboard now?

I get an error when I try to import FirstModalComponent and put to entryComponents: Component is part of the declaration of 2 modules.

P.S. I'm not sure that this is a good idea to make it as module..

Answer 1

You should be declaring the FirstModalComponent in only one module. It can be part of one module and exported by the same and can be defined as entryComponent for it's own module.

For your case, declare it as

entryComponents: [ FirstModalComponent ]

for the FirstModalModule and export the FirstModalComponent from FirstModalModule. It will work as expected when you import FirstModalModule inside ModalsModule or any other module in your application.

Make sure this FirstModalModule is exported by your ModalsModule and the SharedModule depending on your use. if you want to use it by importing SharedModule into your DashboardModule, this has to be exported from SharedModule.