Type ModalBackdropComponent is part of the declarations of 2 modules: MyModule and AppModule

Question

Environment: Angular 2 RC5, ng2-bootstrap.. Upgrading from RC4 to RC5

Error:

Uncaught EXCEPTION: Error in http://localhost:4200/app/forgot-username/forgot-username.component.html:39:60
ORIGINAL EXCEPTION: Type ModalBackdropComponent is part of the declarations of 2 modules: Myodule and AppModule!
ORIGINAL STACKTRACE:
Error: Type ModalBackdropComponent is part of the declarations of 2 modules: MyModule and AppModule!
    at new BaseException (http://localhost:4200/vendor/@angular/compiler/src/facade/exceptions.js:27:23)

Here's MyModule

@NgModule({
  imports:      [   DynamicFormModule, routes ],
  declarations: [ MODAL_DIRECTIVES, ForgotUsernameComponent ],
  exports:      [ ],
  providers:    [BS_VIEW_PROVIDERS,  ]
})

App Module

@NgModule({
    imports: [
        BrowserModule,
        // FormsModule,
        routing,
        HttpModule,
        ForgotUsernameModule
    ],
    declarations: [
        // AppComponent
    ],
    bootstrap: [ AppComponent]
})
export class AppModule {


}

I have not declared any ng2-bootstrap related artifacts (ModalBackdropComponent or any other) in AppModule as you can see. So I'm trying to figure out why Angular 2 thinks that I have declared them. How can I fix this?

Answer 1

You need to move ModalBackdropComponent to it's own module (or to another module for shared components and directives and import the shared module where you want to use shared components instead of importing the components directly to several modules.