How to provide generated Routes using ROUTES InjectionToken in a module-less Angular App?

Question

I'm converting to Standalone Components and as they suggest to convert the routes to that:

// In the main application:
export const ROUTES: Route[] = [
  {path: 'admin', loadChildren: () => import('./admin/routes')},
  // ...
];

// In admin/routes.ts:
export default [
  {path: 'home', component: AdminHomeComponent},
  {path: 'users', component: AdminUsersComponent},
  // ...
] as Route[];

But in my current RoutingModule i provide the Routes dynamically using the ROUTES InjectionToken.

  providers: [
    {
      provide: ROUTES,
      useFactory: (gfConfigService: GfConfigService): Routes => gfConfigService.createRoutes(),
      deps: [GfConfigService],
      multi: true,
    },
  ],

Context: So the routes are not really dynamically, but the creation of the Routes depends on some data which is stored in the GfConfigService.

Any idea's how to get rid of this RoutingModule, while still providing the automatic generated routes and still load them lazy when the router hit's for example /admin?

score 0 · Answer 1 · answered Aug 09 '23 at 17:46

this is my working example


export function routeHandler(auth: Auth) {

  const user = auth.currentUser;
  let routes: Routes = []
  if (!auth.currentUser) {
    routes = [{
      path: '',
      loadComponent: () => import('./mt-auth/mt-auth.component').then(x => x.MtAuthComponent)
    }]
  }
  
  routes.push({ path: '**', redirectTo: '' })
  return routes;
  
}

....
provideRouter([]),
{ provide: ROUTES, useFactory: routeHandler, deps: [Auth], multi: true },
....

How to provide generated Routes using ROUTES InjectionToken in a module-less Angular App?

1 Answers1