refactor: migrate to standalone components

Author: ColinFrick

complete-application/src/app/account-page/account-page.component.ts

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import {CommonModule} from "@angular/common";
 
 @Component({
   selector: 'app-account-page',
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './account-page.component.html',
   styleUrls: ['./account-page.component.css']
 })

complete-application/src/app/app.module.ts

@@ -2,32 +2,24 @@ import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {AppComponent} from './app.component';
 import {RouterModule} from "@angular/router";
-import {HomePageComponent} from './home-page/home-page.component';
-import {FormsModule} from "@angular/forms";
 //tag::importAngularSDK[]
 import {FusionAuthModule} from "@fusionauth/angular-sdk";
 //end::importAngularSDK[]
-import {AccountPageComponent} from './account-page/account-page.component';
-import {MakeChangePageComponent} from './make-change-page/make-change-page.component';
 //tag::importAuthGuard[]
 import {authGuard} from "./auth-guard";
 //end::importAuthGuard[]
 
 @NgModule({
   declarations: [
-    AppComponent,
-    HomePageComponent,
-    AccountPageComponent,
-    MakeChangePageComponent
+    AppComponent
   ],
   imports: [
     BrowserModule,
-    FormsModule,
     //tag::routerConfiguration[]
     RouterModule.forRoot([
-      {path: '', component: HomePageComponent, canActivate: [authGuard(false, '/account')]},
-      {path: 'account', component: AccountPageComponent, canActivate: [authGuard(true, '/')]},
-      {path: 'make-change', component: MakeChangePageComponent, canActivate: [authGuard(true, '/')]},
+      {path: '', loadComponent: () => import('./home-page/home-page.component').then(m => m.HomePageComponent), canActivate: [authGuard(false, '/account')]},
+      {path: 'account', loadComponent: () => import('./account-page/account-page.component').then(m => m.AccountPageComponent), canActivate: [authGuard(true, '/')]},
+      {path: 'make-change', loadComponent: () => import('./make-change-page/make-change-page.component').then(m => m.MakeChangePageComponent), canActivate: [authGuard(true, '/')]},
     ]),
     //end::routerConfiguration[]
     //tag::fusionAuthModuleConfiguration[]

complete-application/src/app/home-page/home-page.component.ts

@@ -1,8 +1,11 @@
 import {Component, inject} from '@angular/core';
 import {FusionAuthService} from "@fusionauth/angular-sdk";
+import {CommonModule} from "@angular/common";
 
 @Component({
   selector: 'app-home-page',
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.css']
 })

complete-application/src/app/make-change-page/make-change-page.component.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
+import {CommonModule} from "@angular/common";
+import {FormsModule} from "@angular/forms";
 
 @Component({
   selector: 'app-make-change-page',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
   templateUrl: './make-change-page.component.html',
   styleUrls: ['./make-change-page.component.css']
 })