abstract states and nested views en Angular moderno

Un estado abstracto pasa a ser una ruta padre con rutas hijas. Su template pasa a ser un componente de layout que contiene un router-outlet.

Antes · AngularJS

$stateProvider
  .state('admin', {
    abstract: true,
    url: '/admin',
    templateUrl: 'admin/layout.html'   // contains <ui-view>
  })
  .state('admin.users', { url: '/users', component: 'adminUsers' })
  .state('admin.roles', { url: '/roles', component: 'adminRoles' });

Después · Angular

export const routes: Routes = [
  {
    path: 'admin',
    component: AdminLayoutComponent,   // template contains <router-outlet />
    canActivate: [authGuard],
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'users' },
      { path: 'users', component: AdminUsersComponent },
      { path: 'roles', component: AdminRolesComponent },
    ],
  },
];

Qué cambia

La marca abstract desaparece: agrega una ruta hija con path vacío que redirija, para que /admin siempre llegue a una pantalla real.
Un estado abstracto sin template, usado solo para un prefijo de URL o un resolve compartido, pasa a ser una ruta padre con hijas y sin componente.
Los guards y resolvers de la ruta padre se ejecutan para todas las rutas hijas.

Consejo de migración. Los componentes hijos no reciben por defecto los parámetros de la ruta padre. Si los estados hijos leían un parámetro del padre, como :orgId, configura paramsInheritanceStrategy: 'always' con withRouterConfig.

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