Is it possible to dynamically load modules in Angular 2+ without knowing about its reference?

Question

Angular

My duplicate:
https://stackoverflow.com/questions/44734387/how-t...
The database stores the url that should load the module from the "dist" directory.

{
  "personal-area": "js/compile-module.js",
  "product": "js/compile-module2.js"
}

Application example:
localhost:8282/#/personal-area
The application then lazily (async | dynamic | any) loads the module from:
localhost:8282/js/compile-module.js
Modules are precompiled beforehand and are not involved in the main application creation phase so I don't have paths to Angular Modules sources. In a routing file (app.routers.ts), I store a component handler that retrieves the path to the module file on the server (based on the URL) from the database.

export const ROUTES: Routes = [

    {
        path: '**',
        component: WorkspaceOutletComponent
    },

];

There is a method in the main handler that tries to load the module, but for reasons I don't understand, I don't know how to get Angular to hook up the compiled eagle module and work.

@Component({ ... })
export class WorkspaceOutletComponent {

    constructor() {
    }

    ngOnInit() {
        // detect routing and exec init
    }

    public init(workSpaceUrl: string, workSpacePathModule: string) {
        console.log(`url: ${workSpaceUrl} path: ${workSpacePathModule}`)();

        this.router.resetConfig([
            {
                path: workSpaceUrl, loadChildren: workSpacePathModule
            }
        ]);

        this.router.navigate([workSpaceUrl])
            .then(() => console.log('Navigate to'))
            .catch((e) => console.error('Error', e));
    }

}

The app is built with webpack 2. But the moment I replace the routing it logs me an error and I don't even know where to dig to dynamically load the module (which I need to get from the database) I do I don't know links per module at build time, nothing, I don't even have the source codes, so I need 3rd party modules to load at runtime. What am I doing wrong?

If I use SystemJS. It doesn't help either, it tries to load the module from disk (from source).

this.router.resetConfig([
            {
                path: workSpaceUrl, loadChildren: SystemJS.import(workSpacePathModule).then(function (m) {
                    console.log(m);
                })
            }
        ]);

I found something here:
https://github.com/angular/angular-cli/issues/4234...
Do I understand correctly that Angular needs an exact name in order for it to make a key-value hash-map. And therefore it is impossible to transfer as I do, but then what should I do if I do not know the correspondence between the path on the disk (since I do not have the source)?

Answer 1

Look at this https://github.com/mgechev/angular-seed/issues/1358, if I understand you correctly, this is what you need.