Компоненты angular4 недоступны для просмотра через app.module

Я пытаюсь построить проект angular 4. я создал общую папку с папками службы, моделей и компонентов в них и файлом shared.module.ts. каждая папка в виде файла модуля (services.module,components.module,models.module), я импортирую файлы этих модулей в shared.module.ts и импортирую их в app.module.ts.

я также создал папку представлений с компонентами входа и учетной записи в ней и файлом views.module.ts. я объявляю эти компоненты внутри views.module.ts и импортирую их в app.module.ts.

я думал, что это позволит мне использовать мои общие компоненты (простой компонент заголовка) внутри моих представлений (логин, учетная запись), но я получаю сообщение об ошибке «compiler.es5.js: 1690 Uncaught Error: Template parse errors: 'app- header' не является известным элементом:"

я могу получить доступ к общим компонентам внутри app.component.html.

также, когда я объявляю компоненты входа и учетной записи внутри app.module.ts, я могу получить доступ к своим общим компонентам внутри представлений. но это не организовано, и я хотел бы иметь возможность добавить несколько компонентов вместе через модуль или какой-либо другой файл.

мой вопрос в том, возможно ли это сделать в angular 4, и если да, то как?

app.module.ts

import { BrowserModule }    from '@angular/platform-browser';
import { NgModule }         from '@angular/core';

import { SharedModule }     from './shared/shared.module';

import { AppComponent }     from './app.component';
import { ViewsModule }      from './views/views.module';

import { AppRoutingModule }   from './app-routing.module';


@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    SharedModule,
    ViewsModule,
    AppRoutingModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

общий.модуль.тс

import { NgModule } from '@angular/core';
import { ServicesModule } from './services/services.module';
import { ModelsModule } from './models/models.module';
import { ComponentsModule } from './components/components.module'


@NgModule({
  imports: [
    ServicesModule,
    ModelsModule,
    ComponentsModule
  ],
  exports:[
    ServicesModule,
    ModelsModule,
    ComponentsModule
  ]

})

export class SharedModule {
}

компоненты.модуль.тс

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

import { HeaderComponent } from './header/header.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports:[
    HeaderComponent
  ],
  declarations: [
    HeaderComponent
  ],
  entryComponents: [

  ],
  providers: [

  ]
})

export class ComponentsModule {
}

view.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { LoginComponent } from './login/login.component';
import { AccountComponent } from './account/account.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  exports:[
     LoginComponent,
     AccountComponent
  ],
  declarations: [
    LoginComponent,
    AccountComponent
  ],
  entryComponents: [],
  providers: []
})

export class ViewsModule {
}