How to dynamically generate routing (via factory) with @angular-devkit/build-angular:application? | Angular Community | Page 1

I recently added some functionality to an application that is set up to use the old browser (Webpack-based) builder that dynamically generates routes via a factory function.

The factory function is as follows, and is used in an NgModule:

@NgModule({
  ...(truncating for brevity)
  providers: [
    {
      provide: ROUTES,
      useFactory: docsRoutesFactory(Library.VizComponents),
      deps: [DocsConfigService],
      multi: true,
    },
  ],
})

// separate file
export function docsRoutesFactory(lib: Library) {
  ...
    const routes: Routes = [
      {
        path: '',
        children: [],
      },
    ];
    config.items.forEach((item: string) => {
      const componentName = ...
      routes[0].children.push({
        path: item,
        loadComponent: () =>
          import(
            `../../${lib}/${item}-docs/${item}-docs.component`
          ).then((m) => m[componentName]),
      });
    });
    return routes;
  };
}

I then tried to replicate this in a newer application that came with the application (Vite-based) builder enabled/set up in angular.json, and it would not work at run time. I tried switching the older application over to the application builder and got the same result. I get the following warning at compilation:

The glob pattern import("../../**/*/**/*-docs/**/*-docs.component") did not match any files [empty-glob]
    projects/demo-app/src/app/manual-documentation/core/routing/manual-docs-routing-factory.ts:17:44:
      17 │ ...=> import(`../../${lib}/${item}-documentation/${item}-docs...

and at runtime, I get the following error in the console if I try to activate one of the routes:

core.mjs:7185 ERROR Error: Module not found in bundle: ../../viz-components/bars-docs/bars-docs.component
    at chunk-QKQ47GQZ.js:4:9
    at Object.loadComponent (manual-docs-routing-factory.ts:24:13)

Any ideas how to do this kind of dynamic routing with the new builder?

Thanks!

A few caveats:

I am happy to be pointed to any resources people know of that exist. I'm here because I just couldn't find anything on this via googling and suggestions I got via Claude also did not help.
I will say I also ran into trouble fully converting this to standalone -- couldn't figure out easily how to provide the factory function that has a service dependency without a module. (Saw some threads about this in Github issues -- for example: https://github.com/angular/angular/issues/51532, opted to just stick with the module for now).
I also realize the original solution may have been kind of unorthodox/wrong in some to many ways, though it did work. It's my first time trying something like this. Ultimate goal is to have the routing generated from a yaml config, and...even though it is not set up in this way yet, to allow for deeper nesting than what I have here as well based on nesting in config. If this approach is all wrong very open to thoughts on better approach!

#How to dynamically generate routing (via factory) with @angular-devkit/build-angular:application?