如何在角度CLI版本1.1.1中将路由模块添加到现有模块?

时间:2017-07-08 19:29:15

标签: angular angular-cli

我使用angular CLI创建了一个模块,忘了在创建时添加--routing,现在我想添加一个路由模块。

ng init --routing在角度CLI版本1.1.1

中没有帮助

2 个答案:

答案 0 :(得分:40)

根本不是问题。

只需手动添加路由。

--routing中添加<router-outlet></router-outlet>之外,app.component.html标记的所有内容都是在名为RouterModule.forRoot()的单独模块中添加q AppRoutingModule调用,并将该模块包含在imports的{​​{1}}中。

因此,在AppModule中,它会将app.module.ts添加到AppRoutingModule的{​​{1}}。

imports定义为AppModule,创建from this template

它非常小,我会在这里复制它:

AppRoutingModule

app-routing.module.ts只是一个占位符,您需要替换它(我知道因为我将它添加到源代码中)。它只是确保路由器在您没有任何路由时不会抱怨import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', children: [] } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

那么,回到问题,你应该怎么做?将文件复制到项目中,看起来就像原来的CLI一样,并将{path: '', children:[]}添加到{{1} } {&#39; s <router-outlet> ...

或者只是将AppRoutingModule添加到AppModule imports。它仍然有效,内置支持延迟加载,其他一切工作正常。

P.S。

请注意,要添加子路由,您始终可以使用路由RouterModule.forRoot([/* routes here */])生成更多模块,无论您是否使用AppModule标记imports。没有配置或任何魔术担心。

答案 1 :(得分:7)

您可以通过CLI进行操作:

ng generate module my-new-routing --module app --flat
  • 用现有模块的名称替换app
  • my-new-routing替换为路由模块的名称

Source