Question

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

假设我有一个组件＆＃34;测试＆＃34;并希望在全球范围内找到这条路线。

Answer 1

到目前为止，我找到了最简单的方法。我知道这已经得到了回答和接受但是它在当前场景中不起作用，因为ng init是removed所以如果你忘记在创建新项目时添加路由，那么你可以向现有项目添加路由如下步骤。希望它会有所帮助。

首先在src中添加app-routing.module.ts文件 - ＆gt; 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 { }

然后在<{1}}文件中导入 app-routing.module.ts文件，如下所示。

<强> app.module.ts

app.module.ts

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

Answer 2

更新 原始问题是关于Angular 2 CLI。这不适用于当前的Angular版本！

运行ng init --routing
从CLI回答否的每个问题。通过这种方式，您将获得 app-routing.module.ts 。
添加import { AppRoutingModule } from './app-routing.module';

和imports: [AppRoutingModule]到 app.module.ts

利润！如果您从一开始就使用Angular CLI创建路由，您将获得相同的路由。

Answer 3

更新 原始问题是关于Angular 2 CLI。这不适用于当前的Angular版本！

这取决于但如果您想将路线添加到现有模块，请将以下内容添加到您的模块中。

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

const routes: Routes = [];
//in array you should have your routes like 
// { path: "path",  component: ComponentName },

然后在NgModule中你有imports定义

RouterModule.forRoot(routes, { useHash: true })

或儿童

RouterModule.forChild(routes)

清洁项目的示例

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



const routes: Routes = [{ path: "path",  component: ComponentName }];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})

Answer 4

如果您当前在应用程序中声明了某个路由器，则无法解释，您可以随时添加路由。

使用命令 - ng int --routing 是不可能的，因为已被删除。并且路由选项仅在运行新命令时可用，该命令用于创建新解决方案。

但你可以手动创建它。如果您的app.module中有一些路由器，或者没有路由器，您可以按照此处描述的步骤生成它： Implementing routing in separate module in angular

Answer 5

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

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

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

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

现在在src/app/app-routing.module.ts中，您必须导入路由器代码：

从'@ angular / router'导入{RouterModule，Routes};
进一步，编辑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 { }

接下来，将router-outlet标记添加到app.html文件中，以告诉路由器在何处显示路由视图。

    <router-outlet></router-outlet>

此外，您还应该检入index.html文件，该标签位于顶部。

    <base href="/">

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

Answer 6

更新接受的答案

请确保遵循以下几点：

1> 确保在index.html中添加了<base href="/">

    <html>
    <head>
    <base href="/" />
    <title>Angular Demo</title>

2> 在您的app.component.html文件<router-outlet></router-outlet>

中添加路由器插座

    div style="text-align:center">
    <h1>
    Welcome to MyApp
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;....">
    </div>
    <router-outlet></router-outlet>

路由器出口告诉路由器在何处显示路由视图。

3> 请记住也将AppRoutingModule添加到app.module.ts中@NgModule装饰器的“导入”部分

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

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

6 个答案: