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?

Have you tried putting SpinnerComponent in it's own module, and then importing that module into the other two modules? — Shawn Flahave
– Shawn Flahave, Commented Sep 8, 2016 at 20:54
I would suggest creating a shared module which will contain SpinnerComponent. Import this module in both of the modules. — saurabh seth
– saurabh seth, Commented Apr 14, 2018 at 11:40

sdemoor · Accepted Answer · 2016-09-19 13:13:44Z

5

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.

...

```

answered Sep 19, 2016 at 13:13

sdemoor

513 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rook · Accepted Answer · 2016-09-08 20:56:08Z

3

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.

answered Sep 8, 2016 at 20:56

rook

3,0364 gold badges28 silver badges45 bronze badges

2 Comments

Don Chambers Over a year ago

Since it's used everywhere I thought I could put it in the main app.module. I already had a shared module so I just put it in there like you suggested.

rook Over a year ago

Yeah, you can't really import form the root app module, but root module can import from other modules.

Luis Cazacu · Accepted Answer · 2016-09-08 21:39:06Z

1

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

answered Sep 8, 2016 at 21:39

Luis Cazacu

2262 silver badges5 bronze badges

Collectives™ on Stack Overflow

Angular2 Component declared in multiple modules

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related