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

Question

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

ng init --routing 在角度CLI版本1.1.1中没有帮助

Answer 1

这根本不是问题.

只需手动添加路由.

所有这一切的--routing标志呢,除了加入<router-outlet></router-outlet>的app.component.html,是加Q RouterModule.forRoot()在被称为一个独立的模块调用AppRoutingModule,并且包括在该模块imports中AppModule.

因此,app.module.ts它增加AppRoutingModule了imports你的AppModule.

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

这{path: '', children:[]}只是一个占位符,你应该替换它(我知道因为我将它添加到源代码中).它只是确保路由器不会抱怨<router-outlet>你什么时候没有路由.

那么,回到问题,你应该怎么做？将文件复制到项目中,看起来就像原始CLI一样,并添加AppRoutingModule到您AppModule的imports...

或者只是添加RouterModule.forRoot([/* routes here */])到你AppModule的imports.它仍然可以工作,内置支持延迟加载和其他一切正常工作.

PS

请记住,要添加子路由,ng generate module Foo --routing无论是否使用了--routing标记,都可以生成更多带路由的模块ng new.没有配置或任何魔术担心.

Answer 2

1. ng generate module app-routing-module --module app --flat
   • 替换app为您现有模块的名称
   • 替换app-routing-module为名称以提供路由模块

2. 在新模块中，添加appRoutes和RouterModule.forRoot或RouterModule.forChild。

   // import { ... } from '...';
   
   const appRoutes: Routes = [
       { path: 'some-path', component: SomeComponent }
   ];
   
   @NgModule({
       imports: [
           RouterModule.forRoot(appRoutes)
       ],
       exports: [
           RouterModule
       ]
   })
   export class AppRoutingModule {}
   

3. <router-outlet></router-outlet>根据需要添加到您的组件（例如app.component.html）

资源