将同一个文件中的不同对象导出到不同的 NgModules答案

【问题标题】：Export different objects from the same file to different NgModules将同一个文件中的不同对象导出到不同的 NgModules
【发布时间】：2019-09-15 09:01:57
【问题描述】：

背景：

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

在AppModule 方面，我想使用here 描述的模式；也就是说，从另一个导出（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 { }

【问题讨论】：

标签： angular es6-modules ng-build

【解决方案1】：

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

将它们放在同一个模块中时不会出现构建问题。

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

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

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

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

看看 Angular 包检查器。这个工具可视化你的包里面有什么，它们使用什么以及它们有多大。它会让事情变得更清楚。

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

【讨论】：