Reverted back to "canActivate" & "canActivateChild"

Converted guards to functional guards

src/app/app.routing.ts

@@ -22,7 +22,8 @@ export const appRoutes: Route[] = [
     // Auth routes for guests
     {
         path: '',
-        canMatch: [NoAuthGuard],
+        canActivate: [NoAuthGuard],
+        canActivateChild: [NoAuthGuard],
         component: LayoutComponent,
         data: {
             layout: 'empty'
@@ -39,7 +40,8 @@ export const appRoutes: Route[] = [
     // Auth routes for authenticated users
     {
         path: '',
-        canMatch: [AuthGuard],
+        canActivate: [AuthGuard],
+        canActivateChild: [AuthGuard],
         component: LayoutComponent,
         data: {
             layout: 'empty'
@@ -65,7 +67,8 @@ export const appRoutes: Route[] = [
     // Admin routes
     {
         path: '',
-        canMatch: [AuthGuard],
+        canActivate: [AuthGuard],
+        canActivateChild: [AuthGuard],
         component: LayoutComponent,
         resolve: {
             initialData: InitialDataResolver,

src/app/core/auth/auth.service.ts

@@ -189,7 +189,7 @@ export class AuthService
             return of(false);
         }
 
-        // If the access token exists and it didn't expire, sign in using it
+        // If the access token exists, and it didn't expire, sign in using it
         return this.signInUsingToken();
     }
 }

src/app/core/auth/guards/auth.guard.ts

@@ -1,67 +1,27 @@
-import { Injectable } from '@angular/core';
+import { inject } from '@angular/core';
-import { CanMatch, Route, Router, UrlSegment, UrlTree } from '@angular/router';
+import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
-import { Observable, of, switchMap } from 'rxjs';
+import { of, switchMap } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
 
-@Injectable({
+export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
-    providedIn: 'root'
+    const router: Router = inject(Router);
-})
-export class AuthGuard implements CanMatch
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _authService: AuthService,
-        private _router: Router
-    )
-    {
-    }
 
-    // -----------------------------------------------------------------------------------------------------
+    // Check the authentication status
-    // @ Public methods
+    return inject(AuthService).check().pipe(
-    // -----------------------------------------------------------------------------------------------------
+        switchMap((authenticated) => {
 
-    /**
+            // If the user is not authenticated...
-     * Can match
+            if ( !authenticated )
-     *
+            {
-     * @param route
+                // Redirect to the sign-in page with a redirectUrl param
-     * @param segments
+                const redirectURL = state.url === '/sign-out' ? '' : `redirectURL=${state.url}`;
-     */
+                const urlTree = router.parseUrl(`sign-in?${redirectURL}`);
-    canMatch(route: Route, segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
-    {
-        return this._check(segments);
-    }
 
-    // -----------------------------------------------------------------------------------------------------
+                return of(urlTree);
-    // @ Private methods
+            }
-    // -----------------------------------------------------------------------------------------------------
 
-    /**
+            // Allow the access
-     * Check the authenticated status
+            return of(true);
-     *
+        })
-     * @param segments
+    );
-     * @private
+};
-     */
-    private _check(segments: UrlSegment[]): Observable<boolean | UrlTree>
-    {
-        // Check the authentication status
-        return this._authService.check().pipe(
-            switchMap((authenticated) => {
-
-                // If the user is not authenticated...
-                if ( !authenticated )
-                {
-                    // Redirect to the sign-in page with a redirectUrl param
-                    const redirectURL = `/${segments.join('/')}`;
-                    const urlTree = this._router.parseUrl(`sign-in?redirectURL=${redirectURL}`);
-
-                    return of(urlTree);
-                }
-
-                // Allow the access
-                return of(true);
-            })
-        );
-    }
-}

src/app/core/auth/guards/noAuth.guard.ts

@@ -1,53 +1,23 @@
-import { Injectable } from '@angular/core';
+import { inject } from '@angular/core';
-import { CanMatch, Route, Router, UrlSegment, UrlTree } from '@angular/router';
+import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
-import { Observable, of, switchMap } from 'rxjs';
+import { of, switchMap } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
 
-@Injectable({
+export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
-    providedIn: 'root'
+    const router: Router = inject(Router);
-})
-export class NoAuthGuard implements CanMatch
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _authService: AuthService,
-        private _router: Router
-    )
-    {
-    }
 
-    // -----------------------------------------------------------------------------------------------------
+    // Check the authentication status
-    // @ Public methods
+    return inject(AuthService).check().pipe(
-    // -----------------------------------------------------------------------------------------------------
+        switchMap((authenticated) => {
 
-    /**
+            // If the user is authenticated...
-     * Can match
+            if ( authenticated )
-     *
+            {
-     * @param route
+                return of(router.parseUrl(''));
-     * @param segments
+            }
-     */
-    canMatch(route: Route, segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
-    {
-        return this._check();
-    }
 
-    // -----------------------------------------------------------------------------------------------------
+            // Allow the access
-    // @ Private methods
+            return of(true);
-    // -----------------------------------------------------------------------------------------------------
+        })
-
+    );
-    /**
+};
-     * Check the authenticated status
-     *
-     * @private
-     */
-    private _check(): Observable<boolean>
-    {
-        // Check the authentication status and return an observable of
-        // "true" or "false" to allow or prevent the access
-        return this._authService.check().pipe(
-            switchMap((authenticated) => of(!authenticated))
-        );
-    }
-}