Angular：从配置文件延迟加载模块

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?

Answer 1

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
]