Как использовать общий модуль во всех компонентах в Angular 4?

Question

Я использую Angular 4 с material, И у меня есть два основных компонента...

1) Login and 2) Dashboard

Есть ленивые компоненты загрузки в dashboard лайк profile, employee и т.д... я хочу установить header и для этого я использовал <mat-toolbar>

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>My application</span>
    <span class="example-spacer"></span>

    <button mat-button>Logout</button>
  </mat-toolbar-row>  
</mat-toolbar>

и файл компонента это.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

 constructor() { }

 ngOnInit() {
 }
}

Чтобы использовать этот компонент во всех dashboard Я создал один shared module файл.

В src/app/shared/modules/header/header.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from 
     '../../../shared/components/header/header.component';
import { MaterialModule } from '../../../material.module';
@NgModule({
imports: [
  CommonModule,
  MaterialModule      
],
declarations: [HeaderComponent],
exports:[HeaderComponent]
})
export class HeaderModule { }

я имею import компонент в файле модуля и положить в exports так что я думаю, что могу использовать header составная часть.

Сейчас я пытаюсь использовать его в dashboard составная часть.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { MaterialModule } from '../material.module';
import { HeaderModule } from '../shared/modules/header/header.module';

@NgModule({
imports: [
  CommonModule,
  DashboardRoutingModule,
  MaterialModule,
  HeaderModule    
],
declarations: [DashboardComponent]
})
export class DashboardModule { }

У меня тоже импорт module и установить header component в entryComponetnt в app.module.ts файл также...

app.module.ts

import { HeaderModule } from './shared/modules/header/header.module';
imports: [
 FormsModule,       
 HeaderModule
],
entryComponents:[HeaderComponent]

Проблема в том, что я получаю заголовок, когда я иду dashboard стр. И также я не получаю никакой ошибки в console,

Answer 1

Я просто добавляю свои общие компоненты selector значение в html-файле панели управления.

<app-header></app-header>

Меня устраивает!