我有一个现有的 Angular 2 应用程序。现在我想使用路由进行导航。 有没有办法使用 Angular 2 Cli 向现有的 Angular 2 项目添加路由？
假设我有一个组件“测试”，并希望在全局范围内有一个路由。
【问题讨论】：
到目前为止，我找到了最简单的方法。我知道这已经得到回答和接受，但它在当前场景中不起作用，因为 ng init 是 removed 所以如果您在创建新项目时忘记添加路由，则可以按照以下步骤将路由添加到现有项目。希望对您有所帮助。
首先在你的 src 中添加app-routing.module.ts 文件 --> 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
现在您可以执行路由任务了。
【讨论】：
更新 最初的问题是关于 Angular 2 CLI。这不适用于当前的 Angular 版本！
运行ng init --routing
并回答否来自 CLI 的每个问题。 通过这种方式，您将获得 app-routing.module.ts。
添加import { AppRoutingModule } from './app-routing.module';
和imports: [AppRoutingModule] 到你的app.module.ts
【讨论】：
ng init 是 removed as of 1.0.0-beta.32
在 Angular 5/6 中，您可以使用这些命令将路由添加到现有项目。
ng generate module app-routing --flat --module=app--flat 将文件放在 src/app 而不是它自己的文件夹中。 --module=app 告诉 CLI 将其注册到 AppModule 的导入数组中。
这将为您生成文件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命令，它将直接添加。
【讨论】：
更新 最初的问题是关于 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 },
然后在你有 imports 定义的 NgModule 中
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: []
})
【讨论】：
如果您当前在您的应用程序中声明了某些路由器，则无法说明您可以随时添加路由的任何方式。
不能使用命令 --ng int --routing 因为被淘汰了。并且路由选项仅在您运行创建新解决方案的新命令时可用。
但您可以手动创建它。如果您的 app.module 中有一些路由器或没有，您可以按照此处描述的步骤生成它： Implementing routing in separate module in angular
【讨论】：
更新接受的答案
确保遵循以下几点：
1>
确保<base href="/"> 被添加到 index.html 中
<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 装饰器的“imports”部分
@NgModule({
imports: [
AppRoutingModule
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
【讨论】：