Angular : sous-module

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

elmouelhi.achref@gmail.com

H & H: Research and Training 1 / 27

 Plan

1 Création de sous-module

2 Création de nouveaux composants dans un sous-module

3 Routage de sous-module
Eager loading
Lazy loading

H & H: Research and Training 2 / 27

 Création de sous-module

Angular

Pour créer un nouveau sous-module

H I ©
EL
ng generate module module-name

O U
f E LM
ch r e
©A

H & H: Research and Training 3 / 27

 Création de sous-module

Angular

Pour créer un nouveau sous-module

H I ©
EL
ng generate module module-name

O U
f E LM
Ou utiliser le raccourci
ch r e
ng g m module-name ©A

H & H: Research and Training 3 / 27

 Création de sous-module

Angular
Pour créer un sous-module vehicule (ce dernier ne sera pas
enregistré dans app.module.ts)
ng g m vehicule

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 4 / 27

 Création de sous-module

Angular
Pour créer un sous-module vehicule (ce dernier ne sera pas
enregistré dans app.module.ts)
ng g m vehicule

H I ©
UEL
O
Pour créer un sous-module vehicule et l’enregistrer dans
app.module.ts
f E LM
ng g m vehicule --module=app
ch r e
©A

H & H: Research and Training 4 / 27

 Création de sous-module

Angular
Pour créer un sous-module vehicule (ce dernier ne sera pas
enregistré dans app.module.ts)
ng g m vehicule

H I ©
UEL
O
Pour créer un sous-module vehicule et l’enregistrer dans
app.module.ts
f E LM
ng g m vehicule --module=app
ch r e
©A
Pour créer un sous-module vehicule, l’enregistrer dans
app.module.ts et créer son module de routage (l’ordre des
options n’a pas d’importance)
ng g m vehicule --module=app --routing
H & H: Research and Training 4 / 27
 Création de sous-module

Angular

Pour bien structurer le projet, on regroupe les modules dans un

répertoire modules
ng g m modules/vehicule --module=app --routing
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 5 / 27

 Création de sous-module

Angular

Pour bien structurer le projet, on regroupe les modules dans un

répertoire modules
ng g m modules/vehicule --module=app --routing
H I ©
UEL
O
Le résultat est : f E LM
ch r e
©A
CREATE
src/app/modules/vehicule/vehicule-routing.module.ts
(252 bytes) CREATE
src/app/modules/vehicule/vehicule.module.ts (288
bytes) UPDATE src/app/app.module.ts (680 bytes)

H & H: Research and Training 5 / 27

 Création de sous-module

Angular

Constats
Deux fichiers créés :
H I ©
vehicule.module.ts et
EL
vehicule-routing.module.ts
M OU
Une mise à jour effectuéeE
f L
: enregistrement de ce sous-module
ch
dans app.module.ts r e
A
©--module=app n’a pas été précisée, il faut déclarer
Si l’option
vehicule.module.ts dans app.module.ts

H & H: Research and Training 6 / 27

 Création de sous-module

Angular
Pour déclarer vehicule.module.ts dans app.module.ts
import { VehiculeModule } from ’./vehicule/vehicule.module’;
// + les autres imports

@NgModule({
declarations: [
H I ©
AppComponent,
UEL
StagiaireComponent,
O
],
AdresseComponent

f E LM
imports: [
ch r e
©A
BrowserModule,
AppRoutingModule,
VehiculeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

H & H: Research and Training 7 / 27

 Création de nouveaux composants dans un sous-module

Angular

Deux méthodes différentes pour la création de nouveaux composants

H I ©
dans un sous-module
UEL
O
LM
Se placer dans le sous-module et créer le nouveau composant

r e f E
Préciser le nom du module au moment de la création du
ch
©A
composant

H & H: Research and Training 8 / 27

 Création de nouveaux composants dans un sous-module

Angular

Exemple avec la première méthode

cd src/app/modules/vehicule ng g c voiture
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 9 / 27

 Création de nouveaux composants dans un sous-module

Angular

Exemple avec la première méthode

cd src/app/modules/vehicule ng g c voiture
H I ©
UEL
O
f E LM
Le résultat est

ch r e
©A
CREATE src/app/modules/vehicule/voiture/voiture.component.html (22 bytes) CREATE
src/app/modules/vehicule/voiture/voiture.component.spec.ts (635 bytes) CREATE
src/app/modules/vehicule/voiture/voiture.component.ts (273 bytes) CREATE
src/app/modules/vehicule/voiture/voiture.component.css (0 bytes) UPDATE
src/app/modules/vehicule/vehicule.module.ts (446 bytes)

H & H: Research and Training 9 / 27

 Création de nouveaux composants dans un sous-module

Angular

Exemple avec la deuxième méthode

ng g c modules/vehicule/camion
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 10 / 27

 Création de nouveaux composants dans un sous-module

Angular

Exemple avec la deuxième méthode

ng g c modules/vehicule/camion
H I ©
UEL
O
f E LM
Le résultat est

ch r e
©A
CREATE src/app/modules/vehicule/camion/camion.component.html (21 bytes) CREATE
src/app/modules/vehicule/camion/camion.component.spec.ts (628 bytes) CREATE
src/app/modules/vehicule/camion/camion.component.ts (269 bytes) CREATE
src/app/modules/vehicule/camion/camion.component.css (0 bytes) UPDATE
src/app/modules/vehicule/vehicule.module.ts (364 bytes)

H & H: Research and Training 10 / 27

 Création de nouveaux composants dans un sous-module

Remarque

Les deux mises à jour effectuées correspondent à la déclaration de ces deux composants dans
vehicule.module.ts

H I ©
EL
import { NgModule } from ’@angular/core’;
import { CommonModule } from ’@angular/common’;
O U
f E LM
import { VehiculeRoutingModule } from ’./vehicule-routing.module’;
import { CamionComponent } from ’./camion/camion.component’;

ch r e
import { VoitureComponent } from ’./voiture/voiture.component’;

@NgModule({
©A
declarations: [CamionComponent, VoitureComponent],
imports: [
CommonModule,
VehiculeRoutingModule
]
})
export class VehiculeModule { }

H & H: Research and Training 11 / 27

 Création de nouveaux composants dans un sous-module

Angular

Question 1 : pourquoi CommonModule ?

C’est le module contenant les pipes et les directives Angular
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 12 / 27

 Création de nouveaux composants dans un sous-module

Angular

Question 1 : pourquoi CommonModule ?

C’est le module contenant les pipes et les directives Angular
H I ©
UEL
O
f E LM
r e
Question 2 : CommonModule n’est pas importé dans
ch
A
app.module.ts, pourquoi ?
©
Dans app.module.ts, on importe BrowserModule et ce dernier
importe CommonModule

H & H: Research and Training 12 / 27

 Routage de sous-module

Angular

Commençons par créer un module de routage pour le sous-module vehicule

(si on n’a pas ajouté l’option --routing à la création)

ng generate module vehicule/vehicule-routing --flat

--module=vehicule

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 13 / 27

 Routage de sous-module

Angular

Commençons par créer un module de routage pour le sous-module vehicule

(si on n’a pas ajouté l’option --routing à la création)

ng generate module vehicule/vehicule-routing --flat

--module=vehicule

H I ©
UEL
O
Explication
f E LM
r e
chsera créé dans: le lemodule
A
vehicule/vehicule-routing
©
vehicule-routing r
de routage appelé
épertoire du module vehicule

--flat pour ne pas créer un répertoire vehicule-routing

--module=vehicule pour déclarer le module créé dans

vehicule.module.ts

H & H: Research and Training 13 / 27

 Routage de sous-module Eager loading

Angular

Deux solutions
H I ©
EL
Définir les routes dans app-routing.module.ts
U
M O
f L
Définir une base pour le module dans
E et une route pour chaque composant
app-routing.module.ts
r e
ch vehicule-routing.module.ts
A
de ce module dans
©

H & H: Research and Training 14 / 27

 Routage de sous-module Eager loading

Angular
Dans app-routing.module.ts, définissons les routes /vehicule/camion, /vehicule/voiture et /vehicule

import { NgModule } from ’@angular/core’;

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

// + les autres imports de components

©
const routes: Routes = [
{ path: ’stagiaire’, component: StagiaireComponent },

H I
EL
{ path: ’stagiaire/:nom/:prenom’, component: StagiaireComponent },
{ path: ’adresse’, component: AdresseComponent },
{ path: ’trainee’, redirectTo: ’/stagiaire’ },
{ path: ’error’, component: ErrorComponent },
O U
LM
{
path: ’vehicule’, children: [

e f E
{ path: ’camion’, component: CamionComponent },

r
ch
{ path: ’voiture’, component: VoitureComponent },
{ path: ’’, component: VoitureComponent }

©A
]
},
{ path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’ },
{ path: ’**’, redirectTo: ’/error’ }
];

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

H & H: Research and Training 15 / 27

 Routage de sous-module Eager loading

Angular

Rien à ajouter dans vehicule-routing.module.ts

import { NgModule } from ’@angular/core’;
import { Routes, RouterModule } from ’@angular/router’;
H I ©
U EL
O
LM
const routes: Routes = [];

r e f E
ch
@NgModule({

©A
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class VehiculeRoutingModule { }

H & H: Research and Training 16 / 27

 Routage de sous-module Eager loading

Ajoutons le constructeur suivant dans vehicule.module.ts

export class VehiculeModule {

constructor() { console.log(’vehicule-module’); }
}

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 17 / 27

 Routage de sous-module Eager loading

Ajoutons le constructeur suivant dans vehicule.module.ts

export class VehiculeModule {

constructor() { console.log(’vehicule-module’); }
}

Ajoutons le constructeur suivant dans app.module.ts

H I ©
EL
export class AppModule {

}
constructor() { console.log(’app-module’); }
O U
f E LM
ch r e
©A

H & H: Research and Training 17 / 27

 Routage de sous-module Eager loading

Ajoutons le constructeur suivant dans vehicule.module.ts

export class VehiculeModule {

constructor() { console.log(’vehicule-module’); }
}

Ajoutons le constructeur suivant dans app.module.ts

H I ©
EL
export class AppModule {

}
constructor() { console.log(’app-module’); }
O U
f E LM
ch r e
Explication
©A
Allez sur /vehicule/camion et /vehicule/voiture et vérifiez que leurs composants
respectifs s’affichent

Allez aussi les routes précédentes (/adresse par exemple) et vérifier que dans tous les
cas les deux messages app-module et vehicule-module sont affichés dans la
console.

H & H: Research and Training 17 / 27

 Routage de sous-module Eager loading

Angular
Deuxième solution : dans app-routing.module.ts, commentons la dernière partie ajoutée et les deux dernières
routes

import { NgModule } from ’@angular/core’;

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

// + les autres imports de components

const routes: Routes = [

{ path: ’stagiaire’, component: StagiaireComponent },
H I ©
EL
{ path: ’stagiaire/:nom/:prenom’, component: StagiaireComponent },
{ path: ’adresse’, component: AdresseComponent },
{ path: ’trainee’, redirectTo: ’/stagiaire’ },
O U
LM
{ path: ’error’, component: ErrorComponent },
// {
//
//
path: ’vehicule’, children: [

r e f E
{ path: ’camion’, component: CamionComponent },
//
ch
{ path: ’voiture’, component: VoitureComponent },

©A
// { path: ’’, component: VoitureComponent }
// ]
// },
// { path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’ },
// { path: ’**’, redirectTo: ’/error’ }
];

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

H & H: Research and Training 18 / 27

 Routage de sous-module Eager loading

Angular
Ajoutons le routage dans vehicule-routing.module.ts

import { NgModule } from ’@angular/core’;

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

import { VoitureComponent } from ’./voiture/voiture.component’;

H I ©
EL
import { CamionComponent } from ’./camion/camion.component’;

const routes: Routes = [ O U

f E LM
{ path: ’camion’, component: CamionComponent },

];
ch r e
{ path: ’voiture’, component: VoitureComponent },

@NgModule({
©A
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class VehiculeRoutingModule { }

Ainsi, nos chemins sont /voiture et /camion.

H & H: Research and Training 19 / 27
 Routage de sous-module Lazy loading

Angular

Lazy loading
H I ©
EL
OU
On doit définir la base dans app-routing.module.ts
M
f E L
Faire référence à vehicule-routing.module.ts avec la clé
loadChildren hr
c e
©A

H & H: Research and Training 20 / 27

 Routage de sous-module Lazy loading

Modifions le contenu du fichier app-routing.module.ts (solution utilisée jusqu’à la

version 8 d’Angular)

import { NgModule } from ’@angular/core’;

import { RouterModule, Routes } from ’@angular/router’;
// + les autres imports de components

const routes: Routes = [

{ path: ’stagiaire’, component: StagiaireComponent },
{ path: ’stagiaire/:nom/:prenom’, component: StagiaireComponent },
H I ©
EL
{ path: ’stagiaire’, component: StagiaireComponent },
{ path: ’adresse’, component: AdresseComponent },
O U
LM
{ path: ’trainee’, redirectTo: ’/stagiaire’ },
{ path: ’error’, component: ErrorComponent },

e f E
{ path: ’vehicule’, loadChildren: ’./modules/vehicule/vehicule.module
r
ch
#VehiculeModule’ },

©A
{ path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’ },
{ path: ’**’, redirectTo: ’/error’ }
];

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

H & H: Research and Training 21 / 27

 Routage de sous-module Lazy loading

Angular

Dé-commentons les routes dans vehicule-routing.module.ts

import { NgModule } from ’@angular/core’;

import { RouterModule, Routes } from ’@angular/router’;
// + les autres imports de components

H I ©
const routes: Routes = [
U EL
{ path: ’camion’, component: CamionComponent },
O
f E
{ path: ’’, component: VoitureComponent } LM
{ path: ’voiture’, component: VoitureComponent },

];
ch r e
@NgModule({ ©A
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class VehiculeRoutingModule { }

H & H: Research and Training 22 / 27

 Routage de sous-module Lazy loading

Angular
Dans app.module.ts, supprimer l’importation du module VehiculeModule

@NgModule({
declarations: [
AppComponent,
AdresseComponent,
H I ©
],
StagiaireComponent
U EL
O
LM
imports: [
BrowserModule,
AppRoutingModule
r e f E
ch
©A
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() { console.log(’app-module’); }
}

H & H: Research and Training 23 / 27

 Routage de sous-module Lazy loading

Angular
Ainsi, en saisissant

/vehicule : le composant voiture sera affiché

/vehicule/voiture : le composant voiture sera affiché

H I ©
/vehicule/camion : le composant camion sera affiché
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 24 / 27

 Routage de sous-module Lazy loading

Angular
Ainsi, en saisissant

/vehicule : le composant voiture sera affiché

/vehicule/voiture : le composant voiture sera affiché

H I ©
/vehicule/camion : le composant camion sera affiché
U EL
O
f E LM
Remarque
ch r e
©A
Vérifier dans la console qu’en lançant l’application sur
localhost:4200, seul le message app-module est affiché

Le message vehicule-module est affiché seulement si on demande

une route d’un composant du module vehicule ⇒ lazy loading
(chargement paresseux : charger les modules à la demande)

H & H: Research and Training 24 / 27

 Routage de sous-module Lazy loading

Angular

On peut aussi utiliser les promesses (solution utilisée depuis Angular 8) : seul mode de
chargement supporté par Ivy

const routes: Routes = [

{ path: ’stagiaire’, component: StagiaireComponent },
H I ©
EL
{ path: ’stagiaire/:nom/:prenom’, component: StagiaireComponent },
{ path: ’adresse’, component: AdresseComponent },
{ path: ’trainee’, redirectTo: ’/stagiaire’ },
O U
{ path: ’error’, component: ErrorComponent },
{
f E LM
path: ’vehicule’,
ch r e
©A
loadChildren: () => import(’./modules/vehicule/vehicule.module’).
then(m => m.VehiculeModule)
},
{ path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’ },
{ path: ’**’, redirectTo: ’/error’ }
];

H & H: Research and Training 25 / 27

 Routage de sous-module Lazy loading

Angular

Exercice
Créez deux nouveaux sous-modules cours et exercice (sans
les déclarer dans app.module.ts et avec un module de routage
pour chacun)
H I ©
Déplacez les composants stagiaire,U EL et observable
adresse
MO et calcul dans le
dans le sous-module cours et tableau
L
sous-module exercice
r e f E
Déclarez lesA ch
composants stagiaire, adresse et observable
©
dans cours.module.ts et tableau et calcul dans
exercice.module.ts
Définissez des nouvelles routes vers les composants déplacés et
qui doivent commencer par /cours ou /exercice

H & H: Research and Training 26 / 27

 Routage de sous-module Lazy loading

Angular

Nouveau contenu de routes défini dans app-routing.module.ts

const routes: Routes = [

{
path: ’vehicule’,

H I ©
loadChildren: () => import(’./modules/vehicule/vehicule.module’).then(m => m.VehiculeModule

EL
)
},
{
O U
LM
path: ’cours’,
loadChildren: () => import(’./modules/cours/cours.module’).then(m => m.CoursModule)
},
{
r e f E
path: ’exercice’,
ch
©A
loadChildren: () => import(’./modules/exercice/exercice.module’).then(m => m.ExerciceModule
)
},
{ path: ’error’, component: ErrorComponent },
{ path: ’**’, redirectTo: ’/error’ }
];

H & H: Research and Training 27 / 27