Carlos Cifuentes
AngularJS → Angular reference

ngRoute ($routeProvider, ng-view) in modern Angular

$routeProvider.when becomes an entry in the routes array, and ng-view becomes router-outlet. The Angular Router also supports nested routes, which ngRoute never had.

Before · AngularJS
app.config(function ($routeProvider) {
  $routeProvider
    .when('/users', {
      templateUrl: 'users/list.html',
      controller: 'UserListCtrl',
      controllerAs: 'vm'
    })
    .when('/users/:id', {
      templateUrl: 'users/detail.html',
      controller: 'UserDetailCtrl',
      controllerAs: 'vm'
    })
    .otherwise({ redirectTo: '/users' });
});
After · Angular
// app.routes.ts
export const routes: Routes = [
  { path: 'users', component: UserListComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: '**', redirectTo: 'users' },
];

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes, withComponentInputBinding())],
};

// app.component.html
<router-outlet />

What changes

  • Each templateUrl and controller pair becomes one component referenced by the route.
  • Paths lose the leading slash, and :id params keep the same syntax.
  • $routeChangeStart listeners become guards on the routes, and resolve entries become resolver functions.

Migration tip. Path URLs are the default in Angular. If the old app used hash URLs, decide early whether to keep them with withHashLocation() or to redirect them, because bookmarks and links in emails depend on that choice.

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