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

Question

J'ai créé un module en utilisant angular CLI et j'ai oublié d'ajouter --routing lors de sa création, maintenant je veux y ajouter un module de routage.

ng init --routing ne sera pas utile dans angular CLI version 1.1.1

Answer 1

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

Il suffit d'ajouter le routage manuellement.

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

Ainsi, en app.module.ts il ajoute AppRoutingModule à la imports de votre AppModule .

En AppRoutingModule est défini comme suit app-routing.module.ts qui est créé à partir de ce modèle .

C'est très petit et 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 { }

En {path: '', children:[]} est juste un espace réservé que vous êtes censé remplacer (je le sais parce que je l'ai ajouté au code source). Il permet simplement de s'assurer que le routeur ne se plaint pas de l'utilisation de la directive <router-outlet> quand vous n'avez pas d'itinéraire.

Donc, revenons à la question, que devez-vous faire ? Soit vous copiez le fichier dans votre projet, pour qu'il ressemble au CLI original, et vous ajoutez AppRoutingModule à votre AppModule 's imports ...

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

P.S.

Rappelez-vous que pour ajouter des routes enfant, vous pouvez toujours générer plus de modules avec le routage ng generate module Foo --routing indépendamment du fait que vous ayez utilisé l'option --routing drapeau avec ng new ou pas. Aucune configuration ni aucune magie ne sont à prévoir.

Answer 2

1. ng generate module app-routing --module app --flat

   • Remplacer app avec le nom de votre module existant
   • Remplacer app-routing avec le nom à donner au module de routage

2. Dans le nouveau module, ajoutez appRoutes y RouterModule.forRoot ou RouterModule.forChild .

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { Routes, RouterModule } from '@angular/router';
   
   const appRoutes: Routes = [
       { path: 'some-path', component: SomeComponent }
   ];
   
   @NgModule({
       imports: [
           RouterModule.forRoot(appRoutes)
       ],
       exports: [
           RouterModule
       ]
   })
   export class AppRoutingModule {}

3. Ajouter <router-outlet></router-outlet> à votre composant si nécessaire (par ex, app.component.html )

Source :