title: Multiple modules and routing in angular 5
body: <p>can somebody tell me how correct to set up routing when using multiple modules in my project? I have app.module and courses.module with some components declared in. I want to know how to connect modules and edit properly routing in courses.module, thats share routes: "/courses/list" and "/courses/detail"</p>
  
  <p>app.routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  //import { CoursesRoutingModule } from './components/courses/courses-routing.module';
  
  const routes: Routes = [
    {
      path: 'courses',
      loadChildren: './components/courses/courses-routing.module#CoursesRoutingModule' 
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;h1&gt;App.component&lt;/h1&gt;
  &lt;p&gt;
      &lt;button routerLink="/"&gt;HOME&lt;/button&gt;
      &lt;button routerLink="/courses"&gt;KURSY&lt;/button&gt;
  &lt;/p&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>And here's courses component:</p>
  
  <p>courses.routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { CoursesComponent } from './courses.component';
  import { CoursesDetailComponent } from './components/courses-detail/courses-detail.component';
  import { CoursesListComponent } from './components/courses-list/courses-list.component';
  
  const routes: Routes = [
  //  {
  //    path: 'courses',
  //    loadChildren: '/src/app/components/courses/courses.module'
  //  }
  //  ,
  //  {
  //    path: 'courses/list',
  //    component: CoursesListComponent,
  //    outlet: 'courseslist'
  //  }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class CoursesRoutingModule { }
  </code></pre>
  
  <p>courses.component.html:</p>
  
  <pre><code>&lt;p&gt;
      &lt;button routerLink="/"&gt;HOME&lt;/button&gt;
      &lt;button routerLink="/courses/list"&gt;list&lt;/button&gt;
      &lt;button routerLink="/courses/detail"&gt;detail&lt;/button&gt;
  &lt;/p&gt;
  </code></pre>