關鍵依賴：依賴的請求是一個表達式（Angular CLI 警告）

Question

在這里，我試圖在惰性路由模塊中動態加載惰性子路由。

例如：

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

有什么辦法可以做到這一點？

感謝您的時間和考慮。

Answer 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