title: Routing not working properly in angular 6
body: <p>I'm developing a small angular project with three components.Is that project I have a sub module called component.module and I have added added routing in that module and  component.module includes to  App.module. </p>
  
  <p><strong>It's compiling without any error but nothing display on screen</strong> (see image below).</p>
  
  <p><a href="https://i.stack.imgur.com/kRTqg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kRTqg.png" alt="enter image description here"></a></p>
  
  <p>My project folder structure is like this.</p>
  
  <p><a href="https://i.stack.imgur.com/0T9DO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0T9DO.png" alt="folder structure"></a></p>
  
  <p><strong>components/app-routing.module.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { NgModule } from "@angular/core";
  import { CommonModule } from "@angular/common";
  import { RouterModule, Routes } from "@angular/router";
  
  import { MainLayoutComponent } from "./main-layout/main-layout.component";
  import { IntentListComponent, IntentCreateComponent } from "./intent";
  
  const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    {
      path: "home",
      component: MainLayoutComponent,
      children: [
        { path: "list", component: IntentListComponent },
        { path: "create", component: IntentCreateComponent }
      ]
    } 
  ];
  
  @NgModule({
    imports: [CommonModule, RouterModule.forRoot(routes)],
    declarations: [],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>components/component.module.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { BrowserModule } from "@angular/platform-browser";
  import { NgModule } from "@angular/core";
  import { RouterModule } from "@angular/router";
  import { AppRoutingModule } from "./app-routing.module";
  import { MainLayoutComponent } from "./main-layout/main-layout.component";
  import { IntentCreateComponent, IntentListComponent } from "./intent";
  
  import { ProjectCreateComponent } from "./project";
  
  @NgModule({
    declarations: [
      MainLayoutComponent,
      IntentCreateComponent,
      IntentListComponent,
      ProjectCreateComponent
    ],
    imports: [
      BrowserModule,
      RouterModule,
      AppRoutingModule
    ],
    providers: []
  })
  export class ComponentModule {}</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>app.module.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { BrowserModule } from "@angular/platform-browser";
  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
  import { AppComponent } from "./app.component";
  import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
  import { ComponentModule } from "./components/component.module";
  
  
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
  
      ComponentModule,
  
    ],
    providers: [],
    bootstrap: [AppComponent],
    schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ]
  })
  export class AppModule {}</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>app.component.html</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;app-main-layout&gt;&lt;/app-main-layout&gt;    </code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>app/components/main-layout/main-layout.component.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="side-bar"&gt;
  &lt;/div&gt;
    
  &lt;div class="content-wrapper"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>