Angular4多个模块问题

我有一个应用程序,它有多个视图,如导航和页面.所以我添加了一个布局模块并将该模块导入主模块&现在尝试在app组件中使用布局模块导航组件.所以这应该显示navigation.html内容,但它将变为空白.它也没有给出任何错误.不确定我做错了什么.以下是我的代码,将提供正确的图片：
这是app.model.ts

    

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { LayoutsModule } from './layouts/index';

    @NgModule({
      declarations: [
        AppComponent
      ],imports: [
        BrowserModule,LayoutsModule,AppRoutingModule
      ],providers: [],bootstrap: [AppComponent]
    })
    export class AppModule { }

这是LayoutsModule

   

    import { NgModule } from '@angular/core';
    import { NavigationComponent } from './navigation/navigation.component';


    @NgModule({
      declarations: [
        NavigationComponent
      ],exports: [

      ],imports: [

      ],providers: [

      ]
    })
    export class LayoutsModule {}

?

和我的app.component.html

 

    <app-navigation></app-navigation>
    <router-outlet></router-outlet>

@NgModule({
  declarations: [
    NavigationComponent
  ],exports: [
      NavigationComponent
  ],imports: [],providers: []
})
export class LayoutsModule {}