@angular/router

What are @angular/router's main functionalities?

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<router-outlet></router-outlet>

constructor(private router: Router) { }

navigateToHome() {
  this.router.navigate(['/home']);
}

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.userId = params.get('id');
  });
}

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.isAuthenticated();
  }
}

18.0.0-next.3 (2024-04-03)

Breaking Changes

router

• Providers available to the routed components always come from the injector heirarchy of the routes and never inherit from the RouterOutlet. This means that providers available only to the component that defines the RouterOutlet will no longer be available to route components in any circumstances. This was already the case whenever routes defined providers, either through lazy loading an NgModule or through explicit providers on the route config.

compiler

| Commit | Type | Description | | -- | -- | -- | | f824911510 | fix | For FatalDiagnosticError, hide the message field without affecting the emit (#55160) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | c04ffb1fa6 | fix | use switch statements to narrow Angular switch blocks (#55168) |

core

| Commit | Type | Description | | -- | -- | -- | | 666d646575 | feat | Add event delegation library to queue up events and replay them when the application is ready (#55121) | | 146306a141 | feat | add support for i18n hydration (#54823) | | 840c375255 | fix | do not save point-in-time setTimeout and rAF references (#55124) | | 231e0a3528 | fix | handle ChainedInjectors in injector debug utils (#55144) | | a5fa279b6e | fix | prevent i18n hydration from cleaning projected nodes (#54823) | | f44a5e4604 | fix | support content projection and VCRs in i18n (#54823) | | 914e4530b0 | fix | test cleanup should not throw if Zone is not present (#55096) | | a99cb7ce5b | fix | zoneless scheduler should check if Zone is defined before accessing it (#55118) |

forms

| Commit | Type | Description | | -- | -- | -- | | 1c736dc3b2 | feat | Unified Control State Change Events (#54579) |

language-service

| Commit | Type | Description | | -- | -- | -- | | a48afe0d94 | fix | avoid generating TS syntactic diagnostics for templates (#55091) |

migrations

| Commit | Type | Description | | -- | -- | -- | | 0c20c4075a | fix | avoid conflicts with some greek letters in control flow migration (#55113) |

platform-browser

| Commit | Type | Description | | -- | -- | -- | | 45ae7a6b60 | feat | add withI18nSupport() in developer preview (#55130) |

router

| Commit | Type | Description | | -- | -- | -- | | 87f3f27f90 | feat | Allow resolvers to return RedirectCommand (#54556) | | 3839cfbb18 | fix | Routed components never inherit RouterOutlet EnvironmentInjector (#54265) |

<a name="18.0.0-next.2"></a>