6

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..

nircraft
  • 8,242
  • 5
  • 30
  • 46
Ihor Yanovchyk
  • 768
  • 6
  • 13

1 Answers1

3

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.

nircraft
  • 8,242
  • 5
  • 30
  • 46
  • glad it helped! :). Can you accept the answer, if it helped. – nircraft Mar 22 '19 at 18:52
  • Was this answer made complex by intention? An easier answer would be. 1. Create a `SharedModule` 2. Declare the modalComponent in that module. Add it to entryComponents as well. 3. Import the shared module where needed. 4. Done. – godhar Sep 01 '20 at 11:02
  • @Godhar, I was not sure if OP would like to have it in sharedModule since i didn't know the functionality. I gave both suggestions about adding it to it;s own module or add it to a `SharedModule`. – nircraft Sep 01 '20 at 13:21
  • 1
    I appreciate that @nircraft , but other people are looking at this thread as well. I included a small workflow, this means we get both. Cheerio! – godhar Sep 01 '20 at 14:05