ui-router / ngRoute en Angular moderno

Los estados pasan a ser rutas. El Router de Angular agrega carga diferida por ruta y, con withComponentInputBinding(), entrega los datos de la ruta directo a los inputs del componente.

Antes · AngularJS

$stateProvider
  .state('users', { url: '/users', component: 'userList' })
  .state('userDetail', {
    url: '/users/:id',
    component: 'userDetail',
    resolve: {
      user: function (UserService, $transition$) {
        return UserService.get($transition$.params().id);
      }
    }
  });

Después · Angular

export const routes: Routes = [
  {
    path: 'users',
    loadComponent: () => import('./user-list.component').then(m => m.UserListComponent),
  },
  {
    path: 'users/:id',
    loadComponent: () => import('./user-detail.component').then(m => m.UserDetailComponent),
    resolve: {
      user: (route: ActivatedRouteSnapshot) =>
        inject(UserService).get(route.paramMap.get('id')!),
    },
  },
];

Qué cambia

Los nombres de estado desaparecen: la navegación usa rutas de URL con routerLink o Router.navigate.
resolve funciona igual, escrito como una función que usa inject().
ui-view pasa a ser router-outlet; los estados anidados pasan a ser rutas hijas.

Consejo de migración. En una app híbrida conviven los dos routers. Dale un solo dueño a cada URL y agrega una ruta comodín que entregue las URL desconocidas al router legacy.

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