Is it possible to dynamically create lazy load routes in Angular 4?

Question

JavaScript

I have 5 different modules with different application themes. Now, each theme has its own prefix in the url, like /firstTheme/page, /secondTheme/page, etc. As you can see, it's not very pretty. Is it possible to somehow dynamically change the address for lazy load to get something like

export const routes = RouterModule.forRoot([
  {
    path: '',
    loadChildren: getPath()
  }
])

He swears hard at the option above, and even if it worked during the build, according to the idea, only a chunk of that module will be built, the path of which will be returned by getPath. Stumbled upon router.resetConfig but will it work in my situation? Maybe someone has a solution to this problem?

Answer 1

No. I will give an example using Webpack
In the case of JIT compilation, a plugin such as angular-router-loader.
When the collector is working, it goes through all the routes containing loadChildrenand replaces them with some expression:

{
        loadChildren: () => new Promise(resolve => {
            (require as any).ensure([], require => {
                resolve(require('./path/to/yourmodule').ModuleName);
            })
        })
}

After that, webpack can collect them into certain chunks - additional js files that contain loadable modules.
In the case of AOT compilation, it uses @ngtools/webpack, which does a similar job, while it also compiles all components into *.ngfactory.ts files. After that, webpack also generates chunks with these factories.
In your case, at the build stage, the value is not constant, so the builder will issue an error message. Manual
lazy loading can help to solve this problem , for example.