Angular: Lazy loading modules from config file

Question

In my project there is a config.json in which different modules are defined that should be loaded.

So I want to load them dynamically and lazy.

const MODULE_PATH: string = './local-features/local-test-feature/local-test-feature.module';
const MODULENAME: string = 'LocalTestFeatureModule';
const ROUTE_PATH: string = 'local-test-feature';


lazyRoutes.push({
 path: ROUTE_PATH,
 loadChildren: () => import(MODULE_PATH).then((u) => (<any>u)[MODULENAME]),
});

However, angular throws exceptions if the import method is not passed a hardcoded string as a parameter but a variable.

core.mjs:9229 ERROR Error: Uncaught (in promise): Error: Cannot find module './local-features/local-test-feature/local-test-feature.module'
Error: Cannot find module './local-features/local-test-feature/local-test-feature.module'
    at  lazy namespace object:5:1
    at _ZoneDelegate.invoke (zone.js:375:26)
    at Object.onInvoke (core.mjs:26597:33)
    at _ZoneDelegate.invoke (zone.js:374:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1278:36
    at _ZoneDelegate.invokeTask (zone.js:409:31)
    at core.mjs:26276:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:26276:36)
    at _ZoneDelegate.invokeTask (zone.js:408:60)
    at resolvePromise (zone.js:1214:31)
    at resolvePromise (zone.js:1168:17)
    at zone.js:1281:17
    at _ZoneDelegate.invokeTask (zone.js:409:31)
    at core.mjs:26276:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:26276:36)
    at _ZoneDelegate.invokeTask (zone.js:408:60)
    at Object.onInvokeTask (core.mjs:26584:33)
    at _ZoneDelegate.invokeTask (zone.js:408:60)
    at Zone.runTask (zone.js:178:47)

How can I solve this?

I faced a similar issue here. Solved using injection tokens and using a factory method provider for the injection token ROUTES exposed from @angular/router — Andrew Allen
– Andrew Allen, Commented Jan 5, 2023 at 16:42

Andrei · Accepted Answer · 2023-01-05 23:22:31Z

you can't realy use constants inside of dynamic imports. webpack should know what exactly you are trying to import to build modules tree correctly.

If I got the problem right: you want to put module loading logic somewhere to the module itself and only import that small entryfile with minimal config from that module, and when user navigates to the path - import the whole module.

everyting is possible unless import('path/to/module') piece broken. for example

file: module-entry.ts

export const route: Route = {
  path: 'local-test-feature',
  loadChildren: () => import('./local-features/local-test-feature/local-test-feature.module').then(m => m.LocalTestFeatureModule),
  // this is even more typesafe from ts point of view as it can resolve what is goint to be imported on static level
};

usage:

import {route as localTestFeatureRoute} from './path-to/module-entry.ts'


const routes: Route[] = [
  anyOtherRoute,
  localTestFeatureRoute,
  ...etc
]

Collectives™ on Stack Overflow

Angular: Lazy loading modules from config file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related