Carlos Cifuentes
AngularJS → Angular reference

ui-router / ngRoute in modern Angular

States become routes. The Angular Router adds lazy loading per route and, with withComponentInputBinding(), passes route data straight into component inputs.

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

What changes

  • State names disappear: navigation uses URL paths with routerLink or Router.navigate.
  • resolve works the same way, written as a function that uses inject().
  • ui-view becomes router-outlet; nested states become child routes.

Migration tip. In a hybrid app both routers run together. Give each URL one owner and add a catch-all that hands unknown URLs to the legacy router.

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