(routing) Use "corrected" behavior for relative link resolution (https://github.com/angular/angular/pull/22394) as it's the default value starting from Angular v11 (https://github.com/angular/angular/pull/25609)

src/app/app.module.ts

@@ -15,8 +15,7 @@ import { appRoutes } from 'app/app.routing';
 
 const routerConfig: ExtraOptions = {
     scrollPositionRestoration: 'enabled',
-    preloadingStrategy       : PreloadAllModules,
+    preloadingStrategy       : PreloadAllModules
-    relativeLinkResolution   : 'legacy'
 };
 
 @NgModule({

src/app/modules/admin/apps/contacts/details/details.component.ts

@@ -298,22 +298,15 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
                     return;
                 }
 
-                // Get the current activated route
-                let route = this._activatedRoute;
-                while ( route.firstChild )
-                {
-                    route = route.firstChild;
-                }
-
                 // Navigate to the next contact if available
                 if ( nextContactId )
                 {
-                    this._router.navigate(['../', nextContactId], {relativeTo: route});
+                    this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
                 }
                 // Otherwise, navigate to the parent
                 else
                 {
-                    this._router.navigate(['../'], {relativeTo: route});
+                    this._router.navigate(['../'], {relativeTo: this._activatedRoute});
                 }
 
                 // Toggle the edit mode off

src/app/modules/admin/apps/contacts/list/list.component.html

@@ -78,11 +78,11 @@
                                     </div>
                                 </ng-container>
                                 <!-- Contact -->
-                                <div
+                                <a
                                     class="z-20 flex items-center px-6 py-4 md:px-8 cursor-pointer border-b"
                                     [ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedContact || selectedContact.id !== contact.id,
                                                 'bg-primary-50 dark:bg-hover': selectedContact && selectedContact.id === contact.id}"
-                                    (click)="goToContact(contact.id)">
+                                    [routerLink]="['./', contact.id]">
                                     <div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
                                         <ng-container *ngIf="contact.avatar">
                                             <img
@@ -100,7 +100,7 @@
                                         <div class="font-medium leading-5 truncate">{{contact.name}}</div>
                                         <div class="leading-5 truncate text-secondary">{{contact.title}}</div>
                                     </div>
-                                </div>
+                                </a>
                             </ng-container>
                         </ng-container>
                     </ng-container>

src/app/modules/admin/apps/contacts/list/list.component.ts

@@ -160,41 +160,13 @@ export class ContactsListComponent implements OnInit, OnDestroy
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
-    /**
-     * Go to contact
-     *
-     * @param id
-     */
-    goToContact(id: string): void
-    {
-        // Get the current activated route
-        let route = this._activatedRoute;
-        while ( route.firstChild )
-        {
-            route = route.firstChild;
-        }
-
-        // Go to contact
-        this._router.navigate(['../', id], {relativeTo: route});
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
     /**
      * On backdrop clicked
      */
     onBackdropClicked(): void
     {
-        // Get the current activated route
+        // Go back to the list
-        let route = this._activatedRoute;
+        this._router.navigate(['./'], {relativeTo: this._activatedRoute});
-        while ( route.firstChild )
-        {
-            route = route.firstChild;
-        }
-
-        // Go to the parent route
-        this._router.navigate(['../'], {relativeTo: route});
 
         // Mark for check
         this._changeDetectorRef.markForCheck();
@@ -208,26 +180,14 @@ export class ContactsListComponent implements OnInit, OnDestroy
         // Create the contact
         this._contactsService.createContact().subscribe((newContact) => {
 
-            // Go to new contact
+            // Go to the new contact
-            this.goToContact(newContact.id);
+            this._router.navigate(['./', newContact.id], {relativeTo: this._activatedRoute});
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
         });
     }
 
-    /**
-     * Get country code
-     *
-     * @param iso
-     */
-    getCountryCode(iso: string): string
-    {
-        if ( !iso )
-        {
-            return '';
-        }
-
-        return this.countries.find((country) => country.iso === iso).code;
-    }
-
     /**
      * Track by function for ngFor loops
      *

src/app/modules/admin/apps/file-manager/list/list.component.html

@@ -68,9 +68,9 @@
                 <ng-template
                     #item
                     let-item>
-                    <div
+                    <a
                         class="flex flex-col w-40 h-40 m-2 p-4 shadow rounded-2xl cursor-pointer bg-card"
-                        (click)="goToItem(item.id)">
+                        [routerLink]="['./', item.id]">
                         <div class="aspect-w-9 aspect-h-6">
                             <div class="flex items-center justify-center">
                                 <!-- Icons -->
@@ -109,7 +109,7 @@
                                 <div class="text-secondary truncate">{{item.contents}}</div>
                             </ng-container>
                         </div>
-                    </div>
+                    </a>
                 </ng-template>
 
                 <!-- No items template -->

src/app/modules/admin/apps/file-manager/list/list.component.ts

@@ -90,41 +90,13 @@ export class FileManagerListComponent implements OnInit, OnDestroy
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
-    /**
-     * Go to item
-     *
-     * @param id
-     */
-    goToItem(id: string): void
-    {
-        // Get the current activated route
-        let route = this._activatedRoute;
-        while ( route.firstChild )
-        {
-            route = route.firstChild;
-        }
-
-        // Go to item
-        this._router.navigate(['../', id], {relativeTo: route});
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
     /**
      * On backdrop clicked
      */
     onBackdropClicked(): void
     {
-        // Get the current activated route
+        // Go back to the list
-        let route = this._activatedRoute;
+        this._router.navigate(['./'], {relativeTo: this._activatedRoute});
-        while ( route.firstChild )
-        {
-            route = route.firstChild;
-        }
-
-        // Go back to the parent route
-        this._router.navigate(['../'], {relativeTo: route});
 
         // Mark for check
         this._changeDetectorRef.markForCheck();

src/app/modules/admin/apps/help-center/faqs/faqs.component.html

@@ -4,13 +4,13 @@
     <div class="flex flex-col items-center p-6 sm:p-10">
         <div class="flex flex-col w-full max-w-4xl">
             <div class="-ml-4 sm:mt-8">
-                <button
+                <a
                     mat-button
                     [routerLink]="['../']"
                     [color]="'primary'">
                     <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
                     <span class="ml-2">Back to Help Center</span>
-                </button>
+                </a>
             </div>
             <div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
                 Frequently Asked Questions

src/app/modules/admin/apps/help-center/guides/category/category.component.html

@@ -4,13 +4,13 @@
     <div class="flex flex-col items-center p-6 sm:p-10">
         <div class="flex flex-col w-full max-w-4xl">
             <div class="-ml-4 sm:mt-8">
-                <button
+                <a
                     mat-button
-                    [routerLink]="['../../../../']"
+                    [routerLink]="['../']"
                     [color]="'primary'">
                     <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
-                    <span class="ml-2">Back to Help Center</span>
+                    <span class="ml-2">Back to Guides & Resources</span>
-                </button>
+                </a>
             </div>
             <div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
                 {{guideCategory.title}}

src/app/modules/admin/apps/help-center/guides/guide/guide.component.html

@@ -4,13 +4,13 @@
     <div class="flex flex-col items-center p-6 sm:p-10">
         <div class="flex flex-col w-full max-w-4xl">
             <div class="-ml-4 sm:mt-8">
-                <button
+                <a
                     mat-button
                     [routerLink]="['../']"
                     [color]="'primary'">
                     <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
                     <span class="ml-2">Back to {{guideCategory.title}}</span>
-                </button>
+                </a>
             </div>
             <div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">{{guideCategory.guides[0].title}}</div>
             <div class="mt-1 sm:text-2xl tracking-tight text-secondary">{{guideCategory.guides[0].subtitle}}</div>

src/app/modules/admin/apps/help-center/guides/guides.component.html

@@ -4,13 +4,13 @@
     <div class="flex flex-col items-center p-6 sm:p-10">
         <div class="flex flex-col w-full max-w-4xl">
             <div class="-ml-4 sm:mt-8">
-                <button
+                <a
                     mat-button
-                    [routerLink]="['../../../']"
+                    [routerLink]="['../']"
                     [color]="'primary'">
                     <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
                     <span class="ml-2">Back to Help Center</span>
-                </button>
+                </a>
             </div>
             <div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
                 Guides & Resources

src/app/modules/admin/apps/help-center/support/support.component.html

@@ -4,13 +4,13 @@
     <div class="flex flex-col flex-auto items-center p-6 sm:p-10">
         <div class="flex flex-col w-full max-w-4xl">
             <div class="-ml-4 sm:mt-8">
-                <button
+                <a
                     mat-button
                     [routerLink]="['../']"
                     [color]="'primary'">
                     <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
                     <span class="ml-2">Back to Help Center</span>
-                </button>
+                </a>
             </div>
             <div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
                 Contact support

src/app/modules/admin/apps/tasks/details/details.component.ts

@@ -490,22 +490,15 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
                     return;
                 }
 
-                // Get the current activated route
-                let route = this._activatedRoute;
-                while ( route.firstChild )
-                {
-                    route = route.firstChild;
-                }
-
                 // Navigate to the next task if available
                 if ( nextTaskId )
                 {
-                    this._router.navigate(['../', nextTaskId], {relativeTo: route});
+                    this._router.navigate(['../', nextTaskId], {relativeTo: this._activatedRoute});
                 }
                 // Otherwise, navigate to the parent
                 else
                 {
-                    this._router.navigate(['../'], {relativeTo: route});
+                    this._router.navigate(['../'], {relativeTo: this._activatedRoute});
                 }
             });
 

src/app/modules/admin/apps/tasks/list/list.component.ts

@@ -161,41 +161,13 @@ export class TasksListComponent implements OnInit, OnDestroy
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
-    /**
-     * Go to task
-     *
-     * @param id
-     */
-    goToTask(id: string): void
-    {
-        // Get the current activated route
-        let route = this._activatedRoute;
-        while ( route.firstChild )
-        {
-            route = route.firstChild;
-        }
-
-        // Go to task
-        this._router.navigate(['../', id], {relativeTo: route});
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
     /**
      * On backdrop clicked
      */
     onBackdropClicked(): void
     {
-        // Get the current activated route
+        // Go back to the list
-        let route = this._activatedRoute;
+        this._router.navigate(['./'], {relativeTo: this._activatedRoute});
-        while ( route.firstChild )
-        {
-            route = route.firstChild;
-        }
-
-        // Go to the parent route
-        this._router.navigate(['../'], {relativeTo: route});
 
         // Mark for check
         this._changeDetectorRef.markForCheck();
@@ -211,8 +183,11 @@ export class TasksListComponent implements OnInit, OnDestroy
         // Create the task
         this._tasksService.createTask(type).subscribe((newTask) => {
 
-            // Go to new task
+            // Go to the new task
-            this.goToTask(newTask.id);
+            this._router.navigate(['./', newTask.id], {relativeTo: this._activatedRoute});
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
         });
     }