Angular 9 Dynamically import modules with dynamic routes

Question

I want to import angular modules dynamically with variable string routes from backend service. For example my backend service sends to me this response when app is starting(using APP_INITIALIZER).

{
    "hostname": "a-tenant",
    "modules": {
        "home": {
            "class": "HomeAModule",
            "path": "home-a.module",
         },
    },
},

My app structure is:

So i want to import a module like this

const path = `./tenants/${response.hostname}/home/${response.modules.home.path}`;

import(path).then(m => m[response.modules.home.class]);

My final import code should be like this in runtime:

import('./tenants/a-tenant/home/home-a.module').then(m => m.HomeAModule);

But i'm getting this error, i think webpack does not handle dynamic loads like this.

Thank you for your help :)

Did you ever find a solution to this? I"m in a similar situation: stackoverflow.com/questions/62304831/… — Stuart Allen
– Stuart Allen, Commented Jun 10, 2020 at 13:34
No unfortunately it is not possible. I am importing modules with static paths right now. — immino
– immino, Commented Jun 11, 2020 at 13:11

DMITRYTISHKIN · Accepted Answer · 2020-05-25 22:08:07Z

2

Unfortunately, using dynamic string for dynamic imports is impossible

answered May 25, 2020 at 22:08

DMITRYTISHKIN

5262 silver badges11 bronze badges

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

1 Comment

bzzWomp Over a year ago

Here is a good explanation of why... Dynamic imports are fantastic for code-splitting on a granular level. They allow us to provide lazy-loading boundaries in our application. In the same time, because of their dynamical nature, they often will enable us to sneak in code that requires runtime data for resolution of the imported module ... we should be extremely cautious because we limit the capabilities of the tools that we’re using. We sacrifice automatic bundling of lazy-loaded chunks, type inference, and much more.

Collectives™ on Stack Overflow

Angular 9 Dynamically import modules with dynamic routes

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related