angular4 Components not accessible in view through app.module

Question

i am trying to build an angular 4 project. i have created a shared folder with service, models and components folders in them and a shared.module.ts file. each folder as a module file (services.module,components.module,models.module), i import this modules files to shared.module.ts and import it to app.module.ts.

i also created a views folder with login and account components in it and views.module.ts file. i declare this components inside views.module.ts and import it to app.module.ts.

i thought this will able me to use my shared components (a simple header component) inside my views (login,account) but i'm getting an error "compiler.es5.js:1690 Uncaught Error: Template parse errors: 'app-header' is not a known element:"

i am able to access the shared components inside app.component.html.

also when i declare login and account components inside app.module.ts i can access my shared components inside the views. but this is not organized and i would like to be able to add a few components together via a module or some other file.

my question is if this is possible to do in angular 4 and if so how?

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 { }

shared.module.ts

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 {
}

components.module.ts

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 {
}

Answer 1

after reading a lot about it i understand that Modules don't inherit access to the components, directives, or pipes that are declared in other modules. What AppModule imports is irrelevant to other modules. https://github.com/angular/angular/issues/15024

there is also an interesting desecacion about this issue in her https://github.com/angular/angular/issues/10646

for now i imported ComponentsModule into ViewModule, this does solve me issue but i am still looking for a better solution.

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';

import { ComponentsModule } from '../../shared/components/components.module'


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ComponentsModule// this is the relevant import fix.
  ],
  exports:[
     LoginComponent,
     AccountComponent,
  ],
  declarations: [
    LoginComponent,
    AccountComponent,
  ],
  entryComponents: [],
  providers: [],
})

export class ViewsModule {
}