ngRoute ($routeProvider, ng-view) en Angular moderno

$routeProvider.when pasa a ser una entrada en el arreglo de rutas, y ng-view pasa a ser router-outlet. El Router de Angular además soporta rutas anidadas, algo que ngRoute nunca tuvo.

Antes · 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' });
});

Después · 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 />

Qué cambia

Cada par de templateUrl y controller pasa a ser un componente referenciado por la ruta.
Los paths pierden la barra inicial, y los parámetros :id conservan la misma sintaxis.
Los listeners de $routeChangeStart pasan a ser guards en las rutas, y las entradas de resolve pasan a ser funciones resolver.

Consejo de migración. En Angular las URL sin hash son el comportamiento por defecto. Si la app vieja usaba URL con hash, decide pronto si las mantienes con withHashLocation() o las rediriges, porque los favoritos y los enlaces en correos dependen de esa decisión.

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