Angular Router Introduction: Child Routes, Auxiliary Routes, Master Detail - http://blog.angular-university.io/angular2-router

01.ts

export const routeConfig:Routes = [
    {
        path: 'home',
        component: Home
    },
    {
        path: 'lessons',
        component: AllLessons
    }
];

02.ts

@Component({
    selector:'app',
    template: `

  <main>
      <router-outlet></router-outlet>            
  </main> 
  `
})
export class App {
    ...
}

03.ts

import {RouterModule} from "@angular/router";
import {BrowserModule} from "@angular/platform-browser";

@NgModule({
    declarations: [App],
    imports: [BrowserModule, RouterModule.forRoot(routeConfig)],
    bootstrap: [App]
})
export class AppModule {
    
}

04.ts

function redirectRouterLessonUnmatched(req,res) {
    res.sendFile("index.html", { root: './index.html' });
}

app.use(redirectRouterLessonUnmatched);

05.ts

export const routeConfig:Routes = [
     ... ,
    {
        path: "",
        component: Home
    },
    {
        path: "**",
        component: PageNotFoundComponent
    }
];

06.html

<ul class="top-menu">
    <li>
        <a routerLink="">Home</a>
    </li>
    <li>
        <a routerLink="courses">Courses</a>
    </li>
    <li>
        <a [routerLink]="['lessons']">Lessons</a>
    </li>
</ul>

07.ts

constructor(private router:Router) {

}

openCourse(course) {
    this.router.navigateByUrl(`/courses/${course.id}`);
}

showCoursePlayList(course) {
    this.router.navigate(['/courses',course.id]);
}

08.ts

constructor(router: Router) {

   route.params.subscribe(
        params =>{
            this.courseId = parseInt(params['id']);
        }
    );
}

09.ts

constructor(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    
    const parentRouteId = state.parent(route).params['id'];
    
    ...
}

10.ts

export const routeConfig:Routes = [
    {
        path: '',
        children: [
            {
                path: 'home',
                component: Home
            },
            {
                path: 'lessons',
                component: AllLessons
            }
        ]    
    }

];

11.ts

export const routeConfig:Routes = [
    {        
        path: 'courses',
        children: [
            {
                path: ':id',
                children: [
                    {
                        path: '',    
                        component: CourseLessons,
                    },
                    {
                        path: 'videos/:id',
                        component: VideoLesson
                    },
                    {
                        path: 'textlectures/:id',
                        component: TextLesson
                    },
                    {
                        path: 'quizzes/:id',
                        component: QuizLesson
                    },
                    {
                        path: 'interactivelessons/:id',
                        component: InteractiveLesson
                    }
                ]
            }
        ]    
    }
];

12.html

<div class="main-container">
    <router-outlet></router-outlet>
    <router-outlet name="section1"></router-outlet>
    <router-outlet name="section2"></router-outlet>
    <router-outlet name="section3"></router-outlet>
</div>

13.ts

export const routeConfig:Routes = [
    {
        path: 'courses',
        ....
    },
    {
        path: 'playlist',
        outlet: 'aside',
        component: Playlist
    }
];

03.ts imports the RouterModule twice, unnecessarily.