Angular 4 - Routes - 如何创建一个单独的模块来管理路由并在 app.module.ts 文件中使用它答案

【问题标题】：Angular 4 - Routes - How to create a separate module for managing routes and use it in app.module.ts fileAngular 4 - Routes - 如何创建一个单独的模块来管理路由并在 app.module.ts 文件中使用它
【发布时间】：2018-01-23 12:55:28
【问题描述】：

我是 Angular 的新手，我想在单独的组件中实现 routes 并在 app.module.ts 文件中导入相同的组件。如何在app.module.ts 文件中导入路由组件。

我正在尝试：
app.routes.ts

import { UsersComponent } from './users/users.component';

export class AppRoutes {
    getRoutes() {
        return [
            {
                path: 'users',
                component: UsersComponent
            }
        ];
    }
}

在app.modules.ts

中

import { AppRoutes } from './app.routes';
@NgModule({
  declarations: [
    AppComponent,
    UsersComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    RouterModule.forRoot(AppRoutes.getRoutes())
  ],
  providers: [UsersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我在这里遇到错误：

RouterModule.forRoot(AppRoutes.getRoutes())

【问题讨论】：

标签： angular routing

【解决方案1】：

您应该为路由创建一个单独的模块，并在此模块中添加您的路由器信息。

像这样：

routing.module.ts 文件结构

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

import { LoginComponent } from './user/login/login.component'; //your component

const routes: Routes = [
    { path: 'login', component: LoginComponent}
  ];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [
      RouterModule
   ] 
})
export class RoutingModule { };

导入RouterModule 并配置您的路由信息，然后导出您的配置（在路由器模块的导出部分中）用于另一个模块，例如app.module。

然后导入并注入你的路由模块到你的基础模块app.module

像这样：

app.module.ts 文件结构

import { RoutingModule } from './routing.module';

@NgModule({
  declarations: [],
  imports: [
    RoutingModule
  ],
  exports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

【讨论】：

这对你有帮助吗？
是的，我觉得这是正确的做法，谢谢。

【解决方案2】：

AppRoutes 是一个类，所以你需要在使用它之前实例化它：

let appRoutes = new AppRoutes();

然后

...
RouterModule.forRoot(appRoutes.getRoutes())

【讨论】：

所以我偶然发现了这个问题，因为我需要导出一个单独的文件，其中包含到 routingModule 的路由。您的回答将我引向了我的解决方案，但尽管它似乎可行，但您可能会遇到错误Cannot read property loadChildren of undefined。这反过来又可以在这里解决：stackoverflow.com/questions/43113429/…