关键依赖：依赖的请求是一个表达式（Angular CLI 警告）答案

【问题标题】：Critical dependency: the request of a dependency is an expression (Angular CLI Warning)关键依赖：依赖的请求是一个表达式（Angular CLI 警告）
【发布时间】：2021-06-13 09:27:40
【问题描述】：

在这里，我尝试在惰性路由模块中动态加载惰性子路由。

举个例子：

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);
    });
  }
}

然后，我将在控制台中收到以下警告：

Critical dependency: the request of a dependency is an expression

另外，当我尝试通过应用程序访问财务模块时，我会在浏览器控制台中收到以下错误：

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)

项目环境：

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


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

有什么办法可以做到吗？

感谢您的时间和考虑。

【问题讨论】：

标签： javascript angular typescript angular-cli angular-cli-v8

【解决方案1】：

编译器和捆绑器在构建期间需要对路由进行静态分析，因此为什么我会收到Critical dependency: the request of a dependency is an expression 警告，而在浏览器中浏览应用程序时我会收到Error: Cannot find module './modules/finance/finance.module' Error: Cannot find module './modules/finance/finance.module'，因为它没有存在于捆绑应用程序的上下文中。

所以现在我可以做的就是静态声明路由。

参考：https://github.com/angular/angular-cli/issues/20284#issuecomment-800075447

【讨论】：