Angular 2 Cli dodawanie tras do istniejącego projektu

Question

Mam istniejącą aplikację Angular 2. Teraz chciałbym użyć routingu do nawigacji. Czy istnieje sposób na dodanie routingu do istniejącego projektu Angular 2 za pomocą Angular 2 Cli?

Powiedzmy, że mam "test" komponentu i chcę do niego trasę w globalnym zasięgu.

Answer 1

Znalazłem najprostszy sposób do tej pory. Wiem, że to już zostało odebrane i zaakceptowane, ale nie działa w bieżących scenariuszach, ponieważ ng init jest removed, więc jeśli zapomniałeś dodać routingu podczas tworzenia nowego projektu, możesz dodać trasy do istniejącego projektu w następujący sposób. Mam nadzieję, że będzie to pomocne.

Przede wszystkim dodać app-routing.module.ts plik w src - folder> app

app-routing.module.ts plik będzie jak tego

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 { } 

Następnie importuapp-routing.module.ts plik w app.module.ts pliku następująco.

app.module.ts

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

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

Teraz będziesz w stanie wykonać zadanie routingu.

Answer 2

To zależy, ale jeśli chcesz dodać trasy do istniejącego modułu, dodaj kolejne moduły.

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

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

Następnie w NgModule gdzie trzeba imports definition

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

Albo dla dziecka

RouterModule.forChild(routes) 

przykład dla czystego projektu

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



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

Answer 3

1. Run ng init --routing

2. i odpowiedzi nr każde pytanie z CLI. W ten sposób otrzymasz aplikację app-routing.module.ts.

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

i imports: [AppRoutingModule] do swoich app.module.ts

4. zysk! Otrzymujesz tę samą trasę, którą możesz uzyskać, jeśli od samego początku utworzysz routing z Angular CLI.

Answer 4

nie wyjaśnia, czy w aplikacji jest zadeklarowany router, ale w dowolnym momencie możesz dodać routing.

Nie jest możliwe za pomocą polecenia - ng int --routing, ponieważ zostało wyeliminowane. a opcja routingu jest dostępna tylko po uruchomieniu nowego polecenia, które tworzy nowe rozwiązanie.

Ale można go utworzyć ręcznie. Jeśli masz jakiś router w swoim app.module lub nie ma go, możesz wykonać krok opisany tutaj, aby go wygenerować: Implementing routing in separate module in angular