CODEWITHSUNDEEP
angular
Don Chambers
Don Chambers

Reputation: 4251

Angular2 Component declared in multiple modules

My Angular2 RC6 application has two modules and I'm not sure how to declare a shared component.

I have a component named spinnerComponent that is used throughout the application. I defined it in app.modules.as:

@NgModule({
    imports: [BrowserModule, routing,RepairReturnModule],
    providers: [ ],
    declarations: [AppComponent,SpinnerComponent],
    bootstrap: [AppComponent]
})

Then in RepairreturnModule I define it again as:

@NgModule({
    imports: [CommonModule],
    declarations: [
        SpinnerComponent
    ],
    providers: []
})

As expected, I get:

Type SpinnerComponent is part of the declarations of 2 modules: RepairReturnModule and AppModule

I removed SpinnerComponent from the declaration in RepairreturnModule as then I get:

Unhandled Promise rejection: Template parse errors: Can't bind to 'isRunning' since it isn't a known property of 'spinner-component'. 1. If 'spinner-component' is an Angular component and it has 'isRunning' input, then verify that it is part of this module. 2. If 'spinner-component' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ... which indicated that it is not declared.

What am I missing?

Upvotes: 11

Views: 21756

Answers (3)

sdemoor
sdemoor

Reputation: 51

Add exports: [SpinnerComponent] to your app.modules NgModules decorator.

Reference: https://angular.io/docs/ts/latest/guide/architecture.html,

``` NgModule is a decorator function that takes a single metadata object whose properties describe the module. The most important properties are:

...

exports - the subset of declarations that should be visible and usable in the component templates of other modules.

...

```

Upvotes: 5

Luis Cazacu
Luis Cazacu

Reputation: 226

You can also leave SpinnerComponent in RepairReturnModule, since this one is imported in the main App module, but also add it in the "exports" array of the module. After this just remove it from the declarations of App module.

https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-what-to-export

Upvotes: 1

rook
rook

Reputation: 3008

Seeing the full code would be beneficial but anyway...

You can try to move spinner back to repair module and import it from there in the app module. I use separate (in your case it would be third) 'shared' module where common functionality sits so every other module can import it from there.

Upvotes: 3

Related Questions