Angular Router Course

Author: Your Name

src/app/app-routing.module.ts

@@ -13,7 +13,8 @@ const routes: Routes = [
     },
     {
       path: "courses",
-      loadChildren: () => import('./courses/courses.module').then(m => m.CoursesModule)
+      loadChildren: () => import('./courses/courses.module')
+                            .then(m => m.CoursesModule)
     },
     {
         path: "login",

src/app/courses/course/course.component.html

@@ -8,6 +8,8 @@ <h3 class="discount" *ngIf="couponCode">Use {{couponCode}} for a huge discount!<
 
         <img class="course-thumbnail" [src]="course.iconUrl" *ngIf="course">
 
+        <router-outlet></router-outlet>
+
     </div>
 
 </ng-container>

src/app/courses/courses-routing.module.ts

@@ -3,6 +3,8 @@ import { Routes, RouterModule } from '@angular/router';
 import {HomeComponent} from './home/home.component';
 import {CourseComponent} from './course/course.component';
 import {CourseResolver} from './services/course.resolver';
+import {LessonDetailComponent} from './lesson/lesson-detail.component';
+import {LessonsListComponent} from './lessons-list/lessons-list.component';
 
 
 const routes: Routes = [
@@ -13,6 +15,16 @@ const routes: Routes = [
     {
         path:":courseUrl",
         component: CourseComponent,
+        children: [
+            {
+              path: "",
+              component: LessonsListComponent
+            },
+            {
+                path: "lessons/:lessonSeqNo",
+                component: LessonDetailComponent
+            }
+        ],
         resolve: {
             course: CourseResolver
         }