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爲現有項目添加路線

回答

相關問題