Angular Router Course

Author: Your Name

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

@@ -19,6 +19,7 @@ const routes: Routes = [
         path:":courseUrl",
         component: CourseComponent,
         canActivate: [AuthGuard],
+        canActivateChild: [AuthGuard],
         children: [
             {
               path: "",

src/app/services/auth.guard.ts

@@ -1,12 +1,12 @@
 import {Injectable} from '@angular/core';
 import {AuthStore} from './auth.store';
-import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
+import {ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
 
 @Injectable()
-export class AuthGuard implements CanActivate {
+export class AuthGuard implements CanActivate, CanActivateChild {
 
     constructor(private auth:AuthStore,
                 private router:Router) {
@@ -18,12 +18,25 @@ export class AuthGuard implements CanActivate {
                 state: RouterStateSnapshot):
         Observable<boolean | UrlTree>  {
 
+        return this.checkIfAuthenticated();
+
+    }
+
+
+    canActivateChild(childRoute: ActivatedRouteSnapshot,
+                     state: RouterStateSnapshot):
+        Observable<boolean | UrlTree>   {
+
+        return this.checkIfAuthenticated();
+    }
+
+
+    private checkIfAuthenticated() {
         return this.auth.isLoggedIn$
             .pipe(
                 map(loggedIn =>
                     loggedIn? true: this.router.parseUrl('/login') )
             );
-
     }
 
 }