Answer: 60

apps/angular/60-async-redirect/src/app/dashboard.ts

@@ -1,6 +1,5 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { Router, RouterLink, RouterOutlet } from '@angular/router';
-import { UserProfileService } from './user-profile.service';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
@@ -13,7 +12,7 @@ import { UserProfileService } from './user-profile.service';
       </button>
       <button
         class="rounded border border-black bg-white px-4 py-2 text-black hover:bg-gray-200"
-        (click)="navigate()">
+        routerLink="/navigateTo">
         User Page
       </button>
     </div>
@@ -22,13 +21,4 @@ import { UserProfileService } from './user-profile.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [RouterOutlet, RouterLink],
 })
-export class Dashboard {
-  private router = inject(Router);
-  private userProfile = inject(UserProfileService);
-
-  navigate() {
-    this.userProfile.getProfile().subscribe((profile) => {
-      void this.router.navigate(['/', profile]);
-    });
-  }
-}
+export class Dashboard {}

apps/angular/60-async-redirect/src/app/routes.ts

@@ -1,9 +1,27 @@
-import { Routes } from '@angular/router';
+import { inject } from '@angular/core';
+import { Router, Routes } from '@angular/router';
+import { distinctUntilChanged, map } from 'rxjs';
 import { AdminPage } from './admin-page';
 import { App } from './app';
 import { Dashboard } from './dashboard';
 import { ProfilePage } from './profile-page';
 import { UserPage } from './user-page';
+import { UserProfileService } from './user-profile.service';
+
+const redirectTo = () => {
+  const router = inject(Router);
+
+  return inject(UserProfileService)
+    .getProfile()
+    .pipe(
+      distinctUntilChanged(),
+      map((profile) =>
+        profile === 'admin'
+          ? router.createUrlTree(['/admin'])
+          : router.createUrlTree(['/user']),
+      ),
+    );
+};
 
 export const routes: Routes = [
   {
@@ -12,6 +30,10 @@ export const routes: Routes = [
     children: [
       { path: '', pathMatch: 'full', component: Dashboard },
       { path: 'profile', component: ProfilePage },
+      {
+        path: 'navigateTo',
+        redirectTo,
+      },
       { path: 'admin', component: AdminPage },
       { path: 'user', component: UserPage },
     ],