web-dev-qa-db-de.com

Angular 2 Cli fügt dem vorhandenen Projekt Routen hinzu

Ich habe eine bestehende Angular 2 App. Jetzt möchte ich das Routing für die Navigation verwenden. Gibt es eine Möglichkeit, einem vorhandenen Angular 2-Projekt mithilfe des Angular 2 Cli Routing hinzuzufügen?

Nehmen wir an, ich habe einen Komponenten- "Test" und möchte eine Route zu diesem in einem globalen Geltungsbereich.

angularangular2-routing
13
MeMeMax

Ich habe bisher den einfachsten Weg gefunden. Ich weiß, dass dies bereits beantwortet und akzeptiert wurde, aber in den aktuellen Szenarien nicht funktioniert, da ng initentfernt ist. Wenn Sie also vergessen haben, beim Erstellen eines neuen Projekts Routing hinzuzufügen, können Sie dem folgenden Projekt Routen hinzufügen Schritte. Ich hoffe es wird hilfreich sein.

Fügen Sie zunächst die app-routing.module.ts-Datei in den Ordner src -> app ein

Die Datei app-routing.module.ts wäre so

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

Dann Importapp-routing.module.ts-Datei in app.module.ts-Datei wie folgt.

app.module.ts

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

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

Jetzt können Sie Routing-Aufgaben ausführen.

10
Govinda Rajbhar

UPDATEDie ursprüngliche Frage bezieht sich auf Angular 2 CLI. Dies funktioniert nicht bei der aktuellen Angular-Version!

  1. ng init --routing ausführen

  2. Beantworten Sie nein jede Frage von CLI . Auf diese Weise erhalten Sie app-routing.module.ts.

  3. import { AppRoutingModule } from './app-routing.module'; hinzufügen 

und imports: [AppRoutingModule] in Ihre app.module.ts

  1. Gewinn! Sie erhalten dasselbe Routing, das Sie erhalten würden, wenn Sie das Routing mit Angular CLI von Anfang an erstellen würden.
5
Lends

UPDATEDie ursprüngliche Frage bezieht sich auf Angular 2 CLI. Dies funktioniert nicht bei der aktuellen Angular-Version!

Es hängt davon ab, wenn Sie jedoch Routings zu einem vorhandenen Modul hinzufügen möchten, fügen Sie Folgendes zu Ihrem Modul hinzu.

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

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

Dann in NgModule, wo Sie imports Definition haben 

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

Oder für ein Kind

RouterModule.forChild(routes)

Beispiel für ein sauberes Projekt

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



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

es ist nicht zu erklären, ob in Ihrer Anwendung derzeit ein Router deklariert ist, und Sie können jederzeit Routing hinzufügen. 

Der Befehl --ng int --routing kann nicht verwendet werden, da er entfernt wurde. Die Routing-Option ist nur verfügbar, wenn Sie den neuen Befehl ausführen, mit dem eine neue Lösung erstellt wird.

Sie können es jedoch manuell erstellen. Wenn Sie einen Router in Ihrem app.module oder keinen Router haben, können Sie den hier beschriebenen Schritt ausführen, um ihn zu generieren: Implementieren des Routings in einem separaten Modul in eckig

1
freedeveloper

In Winkel 5/6 können Sie diesen Befehl verwenden

Fügen Sie im vorhandenen Projekt Routing hinzu Verwenden Sie die Option Cli, und führen Sie diesen Befehl aus 

  1. ng Modul erzeugen App-Routing --flat --module = app

--flat legt die Datei in src/app statt in einem eigenen Ordner ab.

es generiert die Datei app-routing.module.ts in src/app/app-routing.module.ts

in der app-routing.module.ts müssen Sie jetzt importieren

2 importiere {RouterModule, Routes} von '@ angle/router';

your app-routing.module.ts look like 

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

und Fügen Sie den Router-Ausgang in der ur app.html-Datei hinzu <router-outlet></router-outlet>

Der <router-outlet> teilt dem Router mit, wo er geroutete Ansichten anzeigen soll . Sie sollten die Index-HTML-Datei dort einchecken, in der sich Tag befindet

**<base href="/">**

es wird direkt hinzugefügt, wenn Sie den Befehl cli verwenden, den ich oben erwähnt habe

0
AAshish jha

Aktualisierung der akzeptierten Antwort  

stellen Sie sicher, dass Sie die folgenden Punkte befolgen:

1> Stellen Sie sicher, dass <base href="/"> in index.html hinzugefügt wird

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

2> Router-Ausgang in der Datei "app.component.html" hinzufügen <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>
  • der Router-Ausgang teilt dem Router mit, wo die geroutete Ansicht angezeigt werden soll.

3> Denken Sie daran, AppRoutingModule auch zum Abschnitt "Importe" Ihres @NgModule-Dekorators in app.module.ts hinzuzufügen

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