7 implement canload

README.md

@@ -1,5 +1,7 @@
 # AngularGuards
 
+Demo - https://angular-guards-canload.vercel.app
+
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.1.
 
 ## Development server

src/app/app-routing.module.ts

@@ -1,11 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from './auth/auth.guard';
 import { HomeComponent } from './home/home.component';
 import { NonAuthenticatedComponent } from './non-authenticated/non-authenticated.component';
 
 const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: 'home' },
   { path: 'home', component: HomeComponent },
+  {
+    path: 'users',
+    canLoad: [AuthGuard],
+    loadChildren: () =>
+      import('./users/users.module').then((m) => m.UsersModule),
+  },
   { path: 'non-auth', component: NonAuthenticatedComponent },
 ];
 

src/app/app.component.html

@@ -2,7 +2,7 @@
   <span>{{ title }}</span>
   <span class="example-spacer"> </span>
   <button mat-button routerLink="home">Home</button>
-  <button mat-button routerLink="users">CanActivate</button>
+  <button mat-button routerLink="users">CanLoad</button>
   <button
     mat-button
     (click)="onLogin()"

src/app/auth/auth.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/auth/auth.guard.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { CanLoad, Router, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthGuard implements CanLoad {
+  constructor(
+    private readonly authService: AuthService,
+    private readonly router: Router
+  ) {}
+  canLoad():
+    | Observable<boolean | UrlTree>
+    | Promise<boolean | UrlTree>
+    | boolean
+    | UrlTree {
+    return this.authService.isLoggedIn$.pipe(
+      tap(console.log),
+      tap((isLoggedIn) =>
+        isLoggedIn ? true : this.router.navigate(['non-auth'])
+      )
+    );
+  }
+}

src/app/home/home.component.ts

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 @Component({
   selector: 'app-home',
   template: `
+    <h1><em>CanLoad</em> guard is used to active lazy loaded routes</h1>
     <h2>Try Navigating between Home and Users tab and switch Login/Logout</h2>
     <mat-grid-list cols="2" rowHeight="2:1">
       <mat-grid-tile>1</mat-grid-tile>

src/app/non-authenticated/non-authenticated.component.ts

@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 @Component({
   selector: 'app-non-authenticated',
   template: `
-    <mat-card>You are not Authenticated to view that Route</mat-card>
+    <mat-card>You are not Authenticated to view this Route</mat-card>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/users/users-container/users-container.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersContainerComponent } from './users-container.component';
+
+describe('UsersContainerComponent', () => {
+  let component: UsersContainerComponent;
+  let fixture: ComponentFixture<UsersContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UsersContainerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/users/users-container/users-container.component.ts

@@ -0,0 +1,8 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-users-container',
+  template: ` <h2>Users lazy loaded route</h2> `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UsersContainerComponent {}

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { UsersContainerComponent } from './users-container/users-container.component';
+
+const routes: Routes = [{ path: '', component: UsersContainerComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class UsersRoutingModule {}

src/app/users/users.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UsersContainerComponent } from './users-container/users-container.component';
+import { UsersRoutingModule } from './users-routing.module';
+
+@NgModule({
+  declarations: [UsersContainerComponent],
+  imports: [CommonModule, UsersRoutingModule],
+  exports: [UsersContainerComponent],
+})
+export class UsersModule {}