在Angular 2中模块化路由模块

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

应用程序模块.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 { }

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 { }

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 { }

应用程序路由.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 { }

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 { }

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 { }

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

应用程序路由.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 { }

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 { }

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图标

我的目标是在克隆此骨架时，尽量减少用户必须编辑以满足其需要的文件数。我正在为我未来的项目创建一个框架，我想尽量减少需要编辑的文件。如果可能，我不想触摸app.modules.ts，只想编辑app.routes.ts和app.config.ts。或者更好的方法是，只编辑app.config.ts，并将

const appRoutes

放入app.config.ts。这可能吗？最小化编辑的最佳方法是什么，这样我们就不需要对不必要的文件进行大量篡改

---

感谢您的帮助

之所以出现Angular未找到NgIf的错误，是因为NgIf在Angular的@Angular/common模块中声明，而您没有在app.routes.ts文件中导入该模块。 （不确定md图标出现问题的原因-您正在app.routes.ts中导入MaterialModule，因此它应该可用……）

但是，回到总体概念，创建app.routes路由模块的目的是将路由问题从主app.routes模块中分离出来。因此，当不同组件的声明发生在AppModule中，路由定义发生在AppRoutingModule中时，责任就被划分了。由于这种分离（在一个模块中声明，在另一个模块中应用于路由），根据定义，您几乎总是会得到任何给定路由组件的两个导入—一个用于声明它所属的模块，另一个用于定义如何将其路由到

我自己不会这么做，但是如果双重导入让你那么烦恼的话，那么唯一真正的解决方案就是将两个模块合并成一个模块，这对于具有直接路由的应用程序来说可能并没有那么糟糕

顺便说一句，Typescript的一大好处是它提供了工具支持。一、 我自己，使用WebStorm，老实说，我从来没有真正键入（甚至没有看到）这些导入语句。WebStorm有一个工具可以在引用各种类时自动添加/删除/调整导入，所以我根本不需要管理它。（默认情况下，WebStorm也会折叠导入，因此它们甚至不可见，除非您显式展开它们）

---

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

之所以出现Angular未找到NgIf的错误，是因为NgIf是在Angular的@Angular/common模块中声明的，并且您没有在app.routes.ts文件中导入该模块。 （不确定md图标出现问题的原因-您正在app.routes.ts中导入MaterialModule，因此它应该可用……）

但是，回到总体概念，创建app.routes路由模块的目的是将路由问题从主app.routes模块中分离出来。因此，当不同组件的声明发生在AppModule中，路由定义发生在AppRoutingModule中时，责任就被划分了。由于这种分离（在一个模块中声明，在另一个模块中应用于路由），根据定义，您几乎总是会得到任何给定路由组件的两个导入—一个用于声明它所属的模块，另一个用于定义如何将其路由到

我自己不会这么做，但是如果双重导入让你那么烦恼的话，那么唯一真正的解决方案就是将两个模块合并成一个模块，这对于具有直接路由的应用程序来说可能并没有那么糟糕

顺便说一句，Typescript的一大好处是它提供了工具支持。一、 我自己，使用WebStorm，老实说，我从来没有真正键入（甚至没有看到）这些导入语句。WebStorm有一个工具可以在引用各种类时自动添加/删除/调整导入，所以我根本不需要管理它。（默认情况下，WebStorm也会折叠导入，因此它们甚至不可见，除非您显式展开它们）

---

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

我的目标是尽量减少对核心子系统的编辑和篡改。我想，当这个系统克隆，用户只需要修改一个或两个文件。目前，我必须修改上面的2个文件，外加1个app.config.ts。有什么建议吗？嗯，我的目标是尽量减少对核心子系统的编辑和篡改。我想，当这个系统克隆，用户只需要修改一个或两个文件。目前，我必须修改上面的2个文件，外加1个app.config.ts。有什么建议吗？