From 512bb78b65bceabee93ee3a7e0b9ac3dfa894966 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.mhatre8989@gmail.com>
Date: Fri, 1 Apr 2022 19:51:11 +0530
Subject: [PATCH 1/4] [issue7]: CanLoad guard implemented

---
 src/app/auth/auth.guard.spec.ts | 16 ++++++++++++++++
 src/app/auth/auth.guard.ts      | 27 +++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src/app/auth/auth.guard.spec.ts
 create mode 100644 src/app/auth/auth.guard.ts

diff --git a/src/app/auth/auth.guard.spec.ts b/src/app/auth/auth.guard.spec.ts
new file mode 100644
index 0000000..68889d2
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/auth/auth.guard.ts b/src/app/auth/auth.guard.ts
new file mode 100644
index 0000000..9909308
--- /dev/null
+++ b/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'])
+      )
+    );
+  }
+}

From 92fafebfe5be203155d695b3355d4c43787f80f2 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.mhatre8989@gmail.com>
Date: Fri, 1 Apr 2022 20:03:45 +0530
Subject: [PATCH 2/4] Implement CanLoad #7

---
 src/app/app-routing.module.ts                 |  7 ++++++
 src/app/app.component.html                    |  2 +-
 src/app/home/home.component.ts                |  1 +
 .../users-container.component.spec.ts         | 25 +++++++++++++++++++
 .../users-container.component.ts              |  8 ++++++
 src/app/users/users-routing.module.ts         | 12 +++++++++
 src/app/users/users.module.ts                 | 11 ++++++++
 7 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/app/users/users-container/users-container.component.spec.ts
 create mode 100644 src/app/users/users-container/users-container.component.ts
 create mode 100644 src/app/users/users-routing.module.ts
 create mode 100644 src/app/users/users.module.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1e0d9ec..9850b10 100644
--- a/src/app/app-routing.module.ts
+++ b/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 },
 ];
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index bf4278e..74577e1 100644
--- a/src/app/app.component.html
+++ b/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()"
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 7e4e238..6d97b15 100644
--- a/src/app/home/home.component.ts
+++ b/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>
diff --git a/src/app/users/users-container/users-container.component.spec.ts b/src/app/users/users-container/users-container.component.spec.ts
new file mode 100644
index 0000000..886f3d8
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/users/users-container/users-container.component.ts b/src/app/users/users-container/users-container.component.ts
new file mode 100644
index 0000000..4cdb87b
--- /dev/null
+++ b/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 {}
diff --git a/src/app/users/users-routing.module.ts b/src/app/users/users-routing.module.ts
new file mode 100644
index 0000000..755ccbd
--- /dev/null
+++ b/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 {}
diff --git a/src/app/users/users.module.ts b/src/app/users/users.module.ts
new file mode 100644
index 0000000..1b72907
--- /dev/null
+++ b/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 {}

From 935f06b833a7eca178d92801cb5752d19ee74f2b Mon Sep 17 00:00:00 2001
From: Akshay <akshay.mhatre8989@gmail.com>
Date: Sat, 2 Apr 2022 13:42:23 +0530
Subject: [PATCH 3/4] typo fixed

---
 src/app/non-authenticated/non-authenticated.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/non-authenticated/non-authenticated.component.ts b/src/app/non-authenticated/non-authenticated.component.ts
index 6507dbc..40593d3 100644
--- a/src/app/non-authenticated/non-authenticated.component.ts
+++ b/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,
 })

From 7b6d6b29136d308c682787dfdd329d2cc371d10f Mon Sep 17 00:00:00 2001
From: Akshay <akshay.mhatre8989@gmail.com>
Date: Sat, 2 Apr 2022 13:48:19 +0530
Subject: [PATCH 4/4] README updated with demo link

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 72dbbc6..cf93840 100644
--- a/README.md
+++ b/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