AngularJS 2 - how to include component defined in one module into another module

Question

Have created 2 modules under app.

app/util -- having spinner-component defined in util.module.ts

app/posts -- have homepage to display posts collecting from server. In this component i want to display spinner component when i fetch details from server.

Getting below error.

Unhandled Promise rejection: Template parse errors: 'spinner' is not a known element:

1. If 'spinner' is an Angular component, then verify that it is part of this module.

2. If 'spinner' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]"): PostsMainComponent@0:0 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 'spinner' is not a known element:

_

app/util/util.module.ts
------------------------
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { SpinnerComponent } from './spinner.component'; 
import { UnsavedGuard } from './unsaveguard'; 

@NgModule({ 
    imports:     [ CommonModule ], 
    declarations:[ SpinnerComponent ], 
    exports:     [ SpinnerComponent ], // already defined exports. 
    providers:   [ UnsavedGuard ]
}) 
export class UtilModule { 
} 

Answer 1

You need to import the utils module in your app module, if not post module, then add it under the imports section.

Answer 2

You can't declare on component in two modules , rather , you'd need to import your utils module inside your posts module.

@NgModule({ 
    imports:     [ UtilModule ] // ... and the rest
}) 
export class PostsModule { 
}