Angular 17+：如何延迟加载仅由一个独立组件使用的第 3 方库

Question

我有一个大型 Angular 应用程序，需要减小包的大小。

我最近迁移到 Angular 17 并使所有组件独立，并开始分离哪些路由应该延迟加载。我尝试的第一个候选是一个允许用户为他们的个人资料自拍的页面。

此页面组件是我的应用程序中使用 ngx-webcam 和 ngx-image-cropper 库的唯一部分。我希望这些库能够从我的

main.js

文件中删除并放入相应的 Lazy chunk 文件中。不幸的是，源地图资源管理器显示这些库仍然是主包的一部分。

如何确保第三方库针对导入/使用它们的特定页面/路由进行延迟加载？

到目前为止我尝试过的：

我已成功按照本指南迁移到独立组件，因此我不再有

app.module.ts

文件。

我还按照 本指南 延迟加载了我的页面组件之一。路由器配置的相关部分如下所示：

  {
    path: 'take-selfie',
    loadComponent: () =>
      import('./pages/player/take-selfie/take-selfie.component')
        .then(m => m.TakeSelfieComponent),
    canActivate: [authGuard]
  },

我还确认

take-selfie.component

只是我的应用程序的一部分，其中提到了 ngx-webcam 和 ngx-image-cropper 库。

Answer 1

哎呀，这个问题是由在导入提供程序的

main.ts

中仍然提到的库引起的。一旦我删除它们，应用程序就会按预期捆绑。