时间戳

首页 > 解决方案 > 将同一个文件中的不同对象导出到不同的 NgModules

angular - 将同一个文件中的不同对象导出到不同的 NgModules

问题描述

背景：

我正在开发一个将利用 Angular 的延迟加载机制的应用程序（我使用的是 7.2.0）。我有几个feature-routing.module.ts处理所述延迟加载模块的路由。

另一方面，AppModule我想使用这里描述的模式；也就是说，从另一个导出（js）配置片段的文件（而不是创建许多不必要的路由模块-每个子路由没有特殊的提供者或服务-）导入路由数组的一部分（js方式）。

问题： 如果我将应用程序的路由配置部分与延迟加载模块的路由模块有关的功能放在同一个文件中，从捆绑的角度会发生什么？

该文件导出了一个仅由延迟加载功能模块使用的路由模块，同时它还导出了一些仅由 app-routing 模块使用的 const。那么整个文件（因此包括功能路由模块和其他对象）是否会被捆绑两次：一次进入应用程序模块，一次进入功能？还是会ng build聪明到只将 const 与 app 模块捆绑一次，并且只将功能路由模块与功能模块捆绑一次？

在我看来这是一个好主意，因为特定功能的所有路由问题都将在一个文件中，并且任何相关模块都会从那里使用它。我拼命地试图减少我的文件数量，因为它已经失控了。

例如用户路由.module.ts：

// This one is meant for the AppRoutingModule, and should only be bundled with that.
export const user_routes: Routes = [
    {
        path: 'users',
        loadChildren: './users/users.module#UsersModule'
    }
// ...
];
// The rest should only be bundled with the UsersModule and NOT with the app module
const routes: Routes = [
// ...
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule { }

标签： angulares6-modulesng-build

解决方案

问题：如果我将应用程序的路由配置部分与延迟加载模块的路由模块有关的功能放在同一个文件中，从捆绑的角度会发生什么？

将它们放在同一个模块中时没有构建问题。

那么整个文件（因此包括功能路由模块和其他对象）是否会被捆绑两次：一次进入应用程序模块，一次进入功能？

TypeScript 导入语句被 WebPack 映射到一个包中的单个引用。所以你不能通过多次导入来复制 TypeScript 源代码。

还是会ng build聪明到只将 const 与 app 模块捆绑一次，并且只将功能路由模块与功能模块捆绑一次？

是的，它只会被捆绑一次，因为 TypeScript 就是这样处理它的。

看看 Angular 捆绑检查器。该工具可视化了您的捆绑包中的内容，它们使用的内容以及它们的大小。它会让事情变得更清楚一些。

https://coryrylan.com/blog/analyzing-bundle-size-with-the-angular-cli-and-webpack

推荐阅读