Angular 2 Cli为现有项目添加路线

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

可以说我有一个组件“测试”，并希望在全球范围内的路线。

来源

2017-02-04 MeMeMax

哦，但他们提出这个问题，不是吗？ https://github.com/angular/angular-cli#generating-a-route – MeMeMax

这应该是最近的功能:) –

呵呵，它似乎只支持当你创建新模块或新项目，只需创建转储模块，然后复制到你的模块，或手动创建它们 –

我发现迄今最简单的方法。我知道这已经被回答和接受，但它在当前情况下不起作用，因为ng init是removed，所以如果您在创建新项目时忘记添加路由，则可以按照以下步骤向现有项目添加路由。希望它会有所帮助。 > app文件夹

APP-routing.module -

首先在你的src添加app-routing.module.ts文件。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

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

来源

2017-11-28 12:33:24

感谢您的更新。随着时间的推移，事情正在发生变化，所以我会接受目前正在运行的最佳答案 – MeMeMax

希望对他人也有帮助 –

为我工作，谢谢。请记住将AppRoutingModule添加到app.module.ts中的@NgModule装饰器的“imports”部分。 – rangfu

这取决于，但如果你想添加路由到现有的模块，然后添加到你的模块。

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: [] 
})

来源

2017-02-04 12:07:05

好的。但是，创建一个新的路由模块来保存所有路由是否有意义？ – MeMeMax

@MeMeMax没有任何意义，如果你有像主站点，管理面板，用户命令等部分的应用程序，新模块就是分离它，例如，每个部分都将是新模块。 –

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

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

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

来源

2017-02-04 19:55:25 Lends

是的，它适用于新项目，但问题是现有的方法？ –

@VolodymyrBilyachat现有项目！否则，您将看不到第二段的提示。 – Lends

ohhh很高兴知道 –

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

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

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

来源

2017-11-20 20:53:16 freedeveloper

Angular 2 Cli为现有项目添加路线

回答

相关问题