web-dev-qa-db-fra.com

Angular 2 Cli ajoutant des itinéraires au projet existant

J'ai une application Angular 2 existante. J'aimerais maintenant utiliser le routage pour la navigation ... Est-il possible d'ajouter un routage à un projet Angular 2 existant à l'aide de Angular 2 Cli?

Disons que j'ai un composant "test" et que je veux un itinéraire vers cela dans un Scope global.

angularangular2-routing
13
MeMeMax

J'ai trouvé le moyen le plus simple jusqu'à présent. Je sais que cela a déjà été répondu et accepté également, mais cela ne fonctionne pas dans les scénarios actuels car ng init est enlevé donc si vous avez oublié d’ajouter un routage lors de la création d’un nouveau projet, vous pouvez ajouter des itinéraires au projet existant aux étapes suivantes. J'espère que ça vous sera utile.

Tout d’abord, ajoutez le fichier app-routing.module.ts dans votre dossier src -> app

Le fichier app-routing.module.ts serait comme ceci

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

Ensuite, Importerapp-routing.module.ts fichier dans le fichier app.module.ts comme suit.

app.module.ts

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

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

Vous pourrez maintenant effectuer une tâche de routage.

10
Govinda Rajbhar

UPDATELa question originale concerne Angular 2 CLI. Cela ne fonctionne pas pour la version angulaire actuelle!

  1. Exécuter ng init --routing

  2. Et répondez non toutes les questions de CLI . De cette façon, vous obtiendrez app-routing.module.ts.

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

et imports: [AppRoutingModule] à votre app.module.ts

  1. Profit! Vous obtenez le même routage que si vous créiez un routage avec Angular CLI dès le début.
5
Lends

UPDATELa question originale concerne Angular 2 CLI. Cela ne fonctionne pas pour la version angulaire actuelle!

Cela dépend, mais si vous souhaitez ajouter des routages au module existant, ajoutez ce qui suit à votre module.

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

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

Puis dans NgModule où vous avez la définition imports 

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

Ou pour enfant

RouterModule.forChild(routes)

Exemple pour projet propre

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



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

il n'est pas expliqué si vous avez actuellement un routeur déclaré dans votre application, vous pouvez ajouter du routage à tout moment. 

Il n'est pas possible d'utiliser la commande --ng int --routing car a été éliminé. et l'option de routage est uniquement disponible lorsque vous exécutez la nouvelle commande, qui crée une nouvelle solution.

Mais vous pouvez le créer manuellement. Si vous avez un routeur dans votre module d'application ou aucun, vous pouvez suivre la procédure décrite ici pour le générer: Implémentation du routage dans un module distinct angulaire

1
freedeveloper

En angulaire 5/6, vous pouvez utiliser cette commande

Ajouter un routage dans un projet existant Utiliser Angular Cli et exécuter cette commande 

  1. ng génère un module app-routing --flat --module = app

--flat place le fichier dans src/app à la place de son propre dossier .-- module = app indique à la CLI de l'enregistrer dans le tableau imports de l'AppModule.

il générera le fichier app-routing.module.ts dans src/app/app-routing.module.ts

maintenant, à l'intérieur de app-routing.module.ts, vous devez importer

2 importer {RouterModule, Routes} de '@ angular/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 { }

et Ajouter une sortie de routeur dans votre fichier app.html <router-outlet></router-outlet>

Le <router-outlet> indique au routeur où afficher les vues routées . Et vous devriez vérifier dans le fichier html de l'index qu'il y a une balise

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

il ajoutera directement si vous utilisez la commande cli que je mentionne ci-dessus

0
AAshish jha

mise à jour sur la réponse acceptée  

assurez-vous de suivre les points ci-dessous:

1> Assurez-vous que <base href="/"> est ajouté dans index.html

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

2> Ajouter la sortie du routeur dans votre fichier 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>
  • la sortie du routeur indique au routeur où afficher la vue routée.

3> N'oubliez pas d'ajouter AppRoutingModule à la section "importations" de votre décorateur @NgModule dans app.module.ts également.

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