how to use parent module component in child module component in angular2

Question

I have header that should be used in both child and parent module.that was imported and used in parent module but when try to import and using in child component it showing error.I mean how to use common header for both parent and child module

Uncaught (in promise): Error:

Type HeaderComponent is part of the declarations of 2 modules: AppModule and ProviderModule! Please consider moving HeaderComponent to a higher module that imports AppModule and ProviderModule.

You can also create a new NgModule that exports and includes HeaderComponent then import that NgModule in AppModule and ProviderModule.

Answer 1

You should create a shared module with the components you want to use, export these components, and import the shared module in your other modules (parent and child for your case).

Shared module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent1 } from "./SharedComponent1";
import { SharedComponent2 } from "./SharedComponent2";

@NgModule({
imports: [
    CommonModule
],
declarations: [
    SharedComponent1,
    SharedComponent2
],
exports: [
    SharedComponent1,
    SharedComponent2
]
})
export class SharedModule {}

Using Shared module:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
...
import { SharedModule } from './SharedModule';

@NgModule({
imports: [
    CommonModule,
    ...
    SharedModule
],
declarations: [
    ...
],
providers: [
    ...
]
})
export class AppModule{}

Answer 2

I have modified ST7s answer.

You should export the components of the parent module, you want to use in the child module. Then import the parent module in the child module.

Parent module (exporting shared components):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent1 } from "./SharedComponent1";
import { SharedComponent2 } from "./SharedComponent2";

@NgModule({
imports: [
    CommonModule
],
declarations: [
    SharedComponent1,
    SharedComponent2,
    ...
],
exports: [
    SharedComponent1,
    SharedComponent2
]
})
export class ParentModule {}

Child module (importing parent module):

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
...
import { ParentModule } from '../ParentModule';

@NgModule({
imports: [
    CommonModule,
    ...
    ParentModule
],
declarations: [
    ...
],
providers: [
    ...
]
})
export class ChildModule{}