在 Angular 2 中模块化路由模块

Question

我正在尝试模块化我的路由模块，如下所示：

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './main/app.component';
import { MaterialModule } from '@angular/material';
import { RouterModule, Routes } from '@angular/router';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { AppRoute } from './app.routes';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoute
  ],
  providers: [
    UserService
  ],
  bootstrap: [ AppComponent ],
})
export class AppModule { }

app.routes.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
]

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoute { }

此方法运行良好，但我一直认为我已经指定了组件导入，例如在两个文件上都找不到该页面。有什么方法可以将组件导入模块化到单独的文件中，以便我可以将该文件包含在模块和路由中？我已经尝试过这些：

app.routes.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './main/app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
]

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent
    ],
    imports: [
        MaterialModule,
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoute { }

并从app.modules.ts中删除冗余声明，但似乎angular找不到ngIf和md-icon。

我的目标是尽量减少用户在克隆此骨架时必须编辑以满足其需要的文件数量。我正在为我未来的项目创建一个骨架，我想尽量减少我必须编辑的文件。如果可能的话，我不想去碰app.modules.ts，只编辑app.routes.ts和app.config.ts。或者更好的是，只编辑 app.config.ts，然后将 const appRoutes 放入 app.config.ts。这可能吗？什么是最小化编辑的最佳方法，这样我们就不需要对不必要的文件进行大量篡改。

感谢您的帮助

Answer 1

你收到关于 Angular not finding NgIf 的错误的原因是因为 NgIf 是在 Angular 的 @angular/common 模块中声明的，而你没有导入app.routes.ts 文件中的那个模块。 （不确定为什么 md-icon 会出现问题 - 您正在 app.routes.ts 中导入 MaterialModule，因此它应该可用....）

但是，回到过度架构的概念，创建 app.routes 路由模块的目的是将路由问题从主要 app.module 中分离出来。因此，责任是分开的，其中各种组件的声明发生在 AppModule 中，而路由定义发生在 AppRoutingModule 中。由于这种分离（在一个模块中声明，在另一个模块中应用路由），根据定义，您几乎总是会以两次导入任何给定的路由组件而告终——一个声明它属于哪个模块，另一个定义如何它可以被路由到。

我自己不会这样做，但如果双重导入让您如此烦恼，那么唯一真正的解决方案是将两个模块合并为一个，这对于具有直接路由的应用程序实际上可能不是那么糟糕。

顺便说一句 - Typescript 的一大好处是它提供的工具支持。我本人使用 WebStorm，老实说，我从来没有真正输入（甚至看不到）那些导入语句。 WebStorm 有工具可以在您引用各种类时自动 add/remove/adjust 导入，所以这根本不是我管理的事情。（默认情况下，WebStorm 还会折叠导入，因此除非您明确展开它们，否则它们甚至不可见）。

我怀疑其他支持 Typescript 的编辑器和 IDE 也有类似的工具，因此管理这些导入不是问题。

在 Angular 2 中模块化路由模块

Modularize routes module in Angular 2

angular

angular-routing

angular-material2

angular-module