Angular2 Component declared in multiple modules

Question

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?

Answer 1

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.

...

```

Answer 2

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.