$stateChangeStart / transition hooks en Angular moderno

Los hooks globales de transición pasan a ser guards asociados a las rutas que protegen.

Antes · AngularJS

$transitions.onStart({ to: 'admin.**' }, function (trans) {
  var auth = trans.injector().get('AuthService');
  if (!auth.isLoggedIn()) {
    return trans.router.stateService.target('login');
  }
});

Después · Angular

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn() ? true : inject(Router).createUrlTree(['/login']);
};

{
  path: 'admin',
  canActivate: [authGuard],
  loadChildren: () => import('./admin.routes').then(m => m.ADMIN_ROUTES),
}

Qué cambia

canActivate decide si una ruta se puede abrir; canMatch decide si siquiera existe para ese usuario.
Un guard devuelve true, false o una redirección, en vez de cancelar un evento.
canDeactivate reemplaza los chequeos de cambios sin guardar que se hacían en $stateChangeStart.

Consejo de migración. Ambos frameworks deben usar el mismo AuthService en una app híbrida. Una sesión que existe solo en un lado es una causa frecuente de errores de login.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn