Critical dependency: the request of a dependency is an expression (Angular CLI Warning)

Question

In here, I'm trying to dynamically load lazy child routes inside a lazy routing module.

For an example:

const serverResponse = [
  {
    path: "transaction",
    children: [
      {
        path: "finance",
        modulePath: "./modules/finance/finance.module",
        moduleName: "FinanceModule",
      },
    ],
  },
];

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class LoanOriginationRoutingModule {
  constructor(private router: Router) {
    this.router.events.pipe(take(1)).subscribe((event) => {
      const parentRoute: any = this.router.config.find(
        (route: any) => route.path === "loanoriginationLib/loanorigination"
      );

      serverResponse.forEach((item) => {
        const childRoutes = item.children.map((subItem) => {
          return {
            path: subItem.path,
            loadChildren: () =>
              import(subItem.modulePath).then((m) => m[subItem.moduleName]),
          };
        });

        parentRoute._loadedConfig.routes.push({
          path: item.path,
          children: childRoutes,
        });
      });

      this.router.resetConfig(this.router.config);
    });
  }
}

Then, I will get this following warning in the console:

Critical dependency: the request of a dependency is an expression

Also when I'm trying to access the finance module via the application, I will get the following error in the browser console:

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot find module './modules/finance/finance.module'
Error: Cannot find module './modules/finance/finance.module'
    at lib lazy namespace object:5
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:39699)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:855
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at invokeTask (zone-evergreen.js:469)
    at ZoneTask.invoke (zone-evergreen.js:454)

The project's environment:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.29
Node: 14.7.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.29
@angular-devkit/build-angular      0.803.29
@angular-devkit/build-ng-packagr   0.803.29
@angular-devkit/build-optimizer    0.803.29
@angular-devkit/build-webpack      0.803.29
@angular-devkit/core               8.3.29
@angular-devkit/schematics         8.3.29
@angular/cdk                       8.2.3
@angular/cli                       8.3.29
@angular/flex-layout               9.0.0-beta.31
@angular/material                  8.2.3
@angular/material-moment-adapter   10.2.7
@ngtools/webpack                   8.3.29
@schematics/angular                8.3.29
@schematics/update                 0.803.29
ng-packagr                         5.7.1
rxjs                               6.4.0
typescript                         3.5.3
webpack                            4.39.2

Is there any way to achieve this?

Thank you for your time and consideration.

Answer 1

The routes needs to be statically analyzable during build time by the compiler and bundler and hence why I'm getting the Critical dependency: the request of a dependency is an expression warning and when browsing the application in the browser I'm getting Error: Cannot find module './modules/finance/finance.module' Error: Cannot find module './modules/finance/finance.module' because it doesn't exist in the context of the bundled application.

So now what I can probably do is to declare the routes statically.

Reference: https://github.com/angular/angular-cli/issues/20284#issuecomment-800075447