Angular 2 Cli向现有项目添加路由

Question

我有一个现有的Angular 2 App.现在我想使用路由进行导航.有没有办法使用Angular 2 Cli向现有的Angular 2项目添加路由？

假设我有一个组件"测试",并希望在全局范围内找到一条路径.

Answer 1

到目前为止,我找到了最简单的方法.我知道这已经回答了,也接受了,但因为它不是在目前的情况下工作ng init被删除,所以如果你已经忘记了添加路由,同时创造新的项目比你可以将路由添加到现有的项目如下步骤.希望它会有所帮助.

首先app-routing.module.ts在src - > app文件夹中添加文件

app-routing.module.ts文件就是这样的

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';     // Add your component here
import { AboutComponent } from './about/about.component';  // Add your component here

//This is my case 
const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'about',
        component: AboutComponent
    }
];

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

然后在文件中导入 app-routing.module.ts文件app.module.ts如下.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; // Added here

现在您将能够执行路由任务.

Answer 2

在 Angular 5/6 中，您可以使用这些命令将路由添加到现有项目。

1. ng generate module app-routing --flat --module=app

--flat 将文件放在 src/app 而不是它自己的文件夹中。--module=app 告诉 CLI 在 AppModule 的导入数组中注册它。

这将为您生成文件src/app/app-routing.module.ts。

2. 现在在里面src/app/app-routing.module.ts你必须导入路由器代码：

   从“@angular/router”导入 { RouterModule, Routes };

3. 此外，编辑src/app/app-routing.module.ts看起来像这样：

    import { RouterModule, Routes, Router } from '@angular/router';
    import {class name} from 'address your component Component';
    const routes: Routes = [
      { path: '/home' , component : yourComponenetName}
    ];
    @NgModule({
      imports: [
        RouterModule.forRoot(routes)
      ],
      exports: [ RouterModule ]
    })
    export class AppRoutingModule { } 

4. 接下来，将router-outlet标签添加到您的app.html文件中以告诉路由器在哪里显示路由视图。

    <router-outlet></router-outlet>

5. 此外，您应该签index.html入顶部带有此标签的文件。

    <base href="/"> 

如果您使用我上面提到的 CLI 命令，它将被直接添加。

Answer 3

更新 原始问题是关于Angular 2 CLI.这对于当前的Angular版本不起作用!

1. 跑 ng init --routing

2. 并且不回答CLI的每一个问题.通过这种方式,您将获得app-routing.module.ts.

3. 加 import { AppRoutingModule } from './app-routing.module';

和imports: [AppRoutingModule]你的app.module.ts

4. 利润!如果您从一开始就使用Angular CLI创建路由,那么您将获得相同的路由.