Angular：路由应该在自己的模块中完成吗？答案

【问题标题】：Angular: Should Routing be done in its own module?Angular：路由应该在自己的模块中完成吗？
【发布时间】：2017-07-28 15:10:23
【问题描述】：

根据 Angular 文档，路由示例的路由与它尝试路由的模块（AppModule）在同一个模块内完成。像这样：

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

但是，style guide for Angular 提到了路由模块的使用。因此为 AppRoutingModule 添加一个文件并在 AppModule 中导入模块，而不是简单地在 AppModule 中完成路由。根据我从各种教程、指南等中收集到的信息，将使用 AppRoutingModule。

然而，我仍然对应该使用哪种结构感到困惑。我被告知软件结构中的模块应该具有尽可能少的依赖关系，以便它们可以轻松部署和/或重用。但是，不是有一个单独的模块用于 100% 依赖于另一个模块的路由吗？

来自 AppRoutingModule 的路由不适用于 AppModule 之外的任何东西。那么为什么要在路由使用的每个组件上复制导入，而不是仅仅在 AppModule 中创建路由呢？

是否有我应该为我的项目使用的特定结构（以及为什么），还是仅取决于我想要如何构建我的项目的个人偏好？

【问题讨论】：

还是只取决于我个人对项目结构的偏好？ - 是的

标签： angular module structure modularity

【解决方案1】：

如果你使用模块系统，你可以做一些优化步骤。例如：

懒惰的路由器
单独的模块注入

您可以通过网络进行检查。加载新模块后 JS 更新。

这对于AOT 编译 来说非常好，您可以在没有任何依赖的情况下获得最快的加载。

如果您需要共享模块，您可以在所有应用程序中使用Bootstrap、modal-window 和其他模块时创建模块和导入和导出模块。

纯组件是糟糕的代码风格，因为你不能将你的项目分离到另一个项目中并且有大的monolyte项目和大的依赖系统联动。

您可以在我的家庭项目中看到调制系统 - https://github.com/Adventure-RPG/Adventure-Client/tree/master/src

【讨论】：

【解决方案2】：

这两种方式都可以，归根结底是偏好。为了可维护性和不断增长的应用程序，将它们分开更容易。

创建一个 app.routing 文件来定义路由，让所有路由保持整洁。例如，我有一个带有 app.routing 文件的应用程序，然后将其导入到 app.module 文件中。任何新的组件或路由都只是简单地添加到 app.routing 文件中，而这个文件只有一个简单的用途。

app.routing

import {RouterModule, Routes} from '@angular/router';
import {LoginPage} from './pages/login.page';
import {AnotherPageComponent} from './pages/anotherPage.component';
import {DashboardPageComponent} from './pages/dashboard.page';
...

// Define the routes for this application
export const appRoutes: Routes = [
  {path: 'dashboard', component: DashboardPageComponent},
  {path: 'another', component: AnotherPageComponent}
  {path: '**', component: LoginPage}
];
export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, {useHash: true});

然后在您的 app.module 中，只需导入您的 appRoutingProviders 和路由常量。

app.module

import {appRoutingProviders, routing} from './app.routing';

imports: [
  routing,
  ...],
providers: [
  appRoutingProviders,
  ..]

同样，这完全取决于您如何构建应用程序，但提前考虑，您希望它尽可能易于维护。最佳方法 - 使用您所了解的，因为通常这会使事情变得更容易。

较大的应用程序可能会将路由进一步分解为可以延迟加载的子模块，但这是另一回事。

tl;dr - 这取决于你，因为没有是或否的答案。

【讨论】：