时间戳

首页 > 解决方案 > 为什么我的一些延迟加载的模块找不到而其他的可以？

angular - 为什么我的一些延迟加载的模块找不到而其他的可以？

问题描述

我的应用程序正在使用延迟加载来加载带有路由的必要模块。我的所有模块都使用相同的路由进行延迟加载，在我的 tsconfig.json 中声明。它们中的大多数都可以正常工作，但由于某种原因，仍然会抛出此错误。

ERROR Error: Uncaught (in promise): Error: Cannot find 'TemplateModule' in '@blockframes/material'

路径 @blockframes/material 在 tsconfig.ts 文件中声明并引用此

"@blockframes/material": ["libs/material/src/index.ts"]

其他库以相同的方式导入，延迟加载就像它们的魅力一样。这里最奇怪的是我从材料库中延迟加载了 2 个模块，但似乎只有一个可以正常工作。

这是我在 app-routing-module 中的路线：

export const routes: Routes = [
  { path: '', redirectTo: 'layout', pathMatch: 'full' },
  {
    path: 'auth',
    loadChildren: '@blockframes/auth#AuthModule'
  },
  {
    path: 'layout',
    component: LayoutComponent,
    canActivate: [AuthGuard, OrganizationListGuard],
    canDeactivate: [OrganizationListGuard],
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      {
        path: 'organization',
        loadChildren: '@blockframes/organization#OrganizationModule'
      },
      {
        path: 'account',
        // loadChildren: '@blockframes/account#AccountModule' // TODO this fail with "Error: Uncaught (in promise): Error: Cannot find 'AccountModule' in '@blockframes/account'"
        loadChildren: 'libs/account/src/lib/account/account.module#AccountModule'
      },
      {
        path: 'home',
        canActivate: [MovieListGuard],
        canDeactivate: [MovieListGuard],
        loadChildren: '@blockframes/movie#MovieModule'
      },
      { path: 'templates',
        // loadChildren: '@blockframes/material#TemplateModule' // TODO this fail with "Error: Uncaught (in promise): Error: Cannot find 'TemplateModule' in '@blockframes/material'"
        loadChildren: 'libs/material/src/lib/template/template.module#TemplateModule'
      },
      {
        path: ':movieId',
        canActivate: [MovieActiveGuard],
        canDeactivate: [MovieActiveGuard],
        loadChildren: '@blockframes/material#DeliveryModule'
      }
    ]
  },
  {
    path: 'not-found',
    loadChildren: '@blockframes/ui#ErrorNotFoundModule'
  },
  {
    path: '**',
    redirectTo: 'not-found'
  }
];

如您所见，@blockframes/account 我遇到了同样的问题。您还可以注意到 @blockframes/material#DeliveryModule 成功延迟加载，如果 TemplateModule 具有与 DeliveryModule 相同的架构。

我意识到我可以将我的绝对路径更改为@blockframes 路径（用于模板和帐户），并且应用程序在重建后仍将运行。如果我停止服务器并且ng serve，我将再次收到无法找到模块错误。

我试图重命名我的模块，因为材料可能是关键字，但它并没有解决问题。

非常感谢您的关注，如果您对此问题有任何疑问，我将很乐意尽快回答。

标签： angularangular2-routinglazy-loadingangular-module

解决方案

看来我们不能从同一级别的销售库中以相同的路径延迟加载两个模块，这似乎可行（直到有人找到更优雅的方法来解决这个问题）

在 tsconfig.json

"@blockframes/material": ["libs/material/src/index.ts"],
"@blockframes/template": ["libs/material/src/index.ts"]

在应用程序路由模块中

@blockframes/template#TemplateModule

作为奖励，一位同事告诉我 Angular 8 将导入动态导入。我们可以这样导入：

import('@blockframes/material').then(x => x.TemplateModule)

推荐阅读