Carlos Cifuentes
AngularJS → Angular reference

abstract states and nested views in modern Angular

An abstract state becomes a parent route with children. Its template becomes a layout component that contains a router-outlet.

Before · 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' });
After · 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 },
    ],
  },
];

What changes

  • The abstract flag disappears: add an empty-path child that redirects, so /admin always lands on a real screen.
  • An abstract state without a template, used only for a URL prefix or a shared resolve, becomes a parent route with children and no component.
  • Guards and resolvers on the parent run for every child route.

Migration tip. Child components do not receive the parent's route params by default. If the old child states read a parent param such as :orgId, set paramsInheritanceStrategy: 'always' through withRouterConfig.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn