web-dev-qa-db-fra.com

Comment ajouter un module de routage à un module existant dans CLI angulaire version 1.1.1?

J'ai créé un module en utilisant l'interface CLI angulaire et j'ai oublié d'ajouter --routing lors de sa création. Je souhaite maintenant y ajouter un module de routage.

ng init --routing n'aidera pas dans la version 1.1.1 de l'interface de ligne de commande angulaire

angularangular-cli
26
Gourishankar

Ce n'est pas un problème du tout.

Ajoutez simplement le routage manuellement.

Tout ce que le drapeau --routing fait, en plus d'ajouter <router-outlet></router-outlet> dans app.component.html, est d'ajouter q appeler RouterModule.forRoot() dans un module séparé appelé AppRoutingModule et d'inclure ce module dans la imports de AppModule.

Donc, dans app.module.ts, il ajoute AppRoutingModule à la imports de votre AppModule.

La AppRoutingModule est définie en tant que app-routing.module.ts, qui est créé à partir de ce modèle .

C'est très petit que je vais le copier ici:

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

const routes: Routes = [
  {
    path: '',
    children: []
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Le {path: '', children:[]} est simplement un espace réservé que vous êtes censé remplacer (je le sais parce que je l'ai ajouté au code source). Cela garantit simplement que le routeur ne se plaint pas du <router-outlet> lorsque vous ne disposez d'aucun itinéraire.

Donc, revenons à la question: que devriez-vous faire? Copiez le fichier dans votre projet, pour qu'il ressemble au CLI d'origine, et ajoutez AppRoutingModule à votre AppModule's imports...

Ou ajoutez simplement RouterModule.forRoot([/* routes here */]) à votre AppModule's imports à la place. Cela fonctionnera toujours, avec un support intégré pour le chargement paresseux et tout le reste fonctionnera parfaitement.

P.S.

N'oubliez pas que pour ajouter des itinéraires enfants, vous pouvez toujours générer plus de modules avec le routage ng generate module Foo --routing, que vous ayez ou non utilisé l'indicateur --routing avec ng new. Aucune configuration ou magie à craindre.

40
Meligy

Vous pouvez le faire via la CLI comme ceci:

ng generate module app-routing --module app --flat

Remplacez app par le nom de votre module existant et remplacez app-routing par le nom que vous souhaitez donner au module de routage.

La source

0
Eric Eskildsen