How to dynamically load the compiled Angular file into routing?

Question

The database stores the URL, which should load the module from the directory 'dist'.

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

Application example:

http://localhost:8282/#/personal-area

Then the application lazy (async|dynamic|any) loads the module from:

http://localhost:8282/js/compile-module.js

Modules are precompiled in advance and at the stage of building the main application they do not participate, so I do not have any paths to the sources of angular modules.

In the file with routing (app.routers.ts) I store the component handler, which pulls from the database the path to the module file on the server (based on URL).

export const ROUTES: Routes = [

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

];

In the main handler there is a method that tries to load the module, but for reasons I do not understand, I do not know how to make Angular connect the compiled module for the eagle 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 application is built using webpack 2. But at the moment when I replace routing, he writes me a mistake, and I do not even know where to dig to dynamically load the module (which I need to come from the database), I do not know the reference to the module during the assembly, nothing, I do not even have source codes, So I need third-party modules to load into runtime. What am I doing wrong?

If I use SystemJS. It also does not help, it tries to load the module from the disk (from source).

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

Here a little is told about how the loading of modules works: https://github.com/angular/angular-cli/issues/4234#issuecomment-275345763

Do I understand correctly that Angular needs an exact name so that he compiles a hash map. And that's why you can not pass it as I do it, but what should I do if I do not know the correspondence between the path on the disk (since I do not have source codes)?

Meligy · Accepted Answer · 2017-06-24 10:42:57Z

2

Not sure whether the reset route way will work or not, but I know that you'll need to generate lazy routes for all modules you might use.

The value for loadChildren will have to be a static string. You cannot even call a function in there to get that string. Even that confuses the Angular CLI magic that works with Webpack to generate the lazy routes.

It should be fine to generate all like lazy routes anyway, and then in runtime load the one(s) you are interested in. Just be careful that resetConfig could be resetting the whole config.

There's also linkNgModuleFactory which can get you an instance of a module factory (what Angular creates from a module after comiling either in browser or AoT), which you might be able to use it with NgComponentOutlet.

answered Jun 24, 2017 at 10:42

Meligy

36.7k11 gold badges90 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

splincode Over a year ago

What does it mean in your case "need to generate lazy routes for all modules you might use"?

splincode Over a year ago

Are there any examples where you can achieve a dynamic string, rather than a static string in loadChildren?

splincode Over a year ago

How can I download the routes and modules of interest if the data comes from the database?

Meligy Over a year ago

What I meant is that you write all the routes as lazy routes (loadChildren and a path). You do not just rely on what the DB tells, you list all of them, so they get separate bundles and can be lazy loaded.

splincode Over a year ago

Excuse me, I do not quite understand. In the usual case, when I have no application connected to the database; I work like this: loadChildren: "app/path-to-typescript-module.ts?chunkNate=name-module". Now I do not have paths to typescript files. Then what should I do according to your methodology? Can attach a sample code or plunker?

Collectives™ on Stack Overflow

How to dynamically load the compiled Angular file into routing?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related