Question

从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中创建路由？

我应该为我的项目使用一个特定的结构（以及为什么），或者它只是个人偏好我想要如何构建我的项目？

Answer 1

如果您使用模块系统，则可以进行一些优化步骤。例如：

懒惰路由器
单独注入模块

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

这对于 AOT-compilation 非常有用，您可以在没有任何依赖性的情况下获得最快的加载。

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

纯组件是 错误的样式代码 ，因为您无法将项目分成另一个项目并且具有大依赖项的大型monolyte项目系统链接。

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

Answer 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 - 由于没有“是”或“否”答案，由您决定。

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

2 个答案: