Petite astuce que j'ai découvert récemment : on peut exécuter du code au chargement d'un module Angular. Et c'est très simple !
@NgModule({...})
export class LazyPageModule {
constructor() {
console.log("I'm running at module loading time");
}
}
Même si ce n'est pas habituel de voir ça en Angular, on peut très bien ajouter un constructeur à la classe de notre module. C'est exactement ce que je fais ici.
Pourquoi je voudrais exécuter du code au chargement d'un module ? Mon cas était très simple : j'avais besoin de charger un script js au moment de charger un module la première fois dans l'application (ce script définissant un WebComponent). Pour ça j'ai créé un ServiceLoaderService (c'est beaucoup plus facile de tester le comportement d'une méthode de service que tester le constructeur d'une classe). Mais pour utiliser un service dans mon constructeur j'avais besoin d'utiliser l'injecteur de dépendance, ce qui fonctionne parfaitement !
@NgModule({...})
export class LazyPageModule {
constructor(scriptLoader: ScriptLoaderService) {
scriptLoader.loadScript('https://my.enterprise.domain.fr/my.dynamic.webcomponent.js');
}
}
L'injection fonctionnant parfaitement bien, c'est que l'équipe Angular a prévu ce cas, je pense donc que ce n'est pas un hack d'utiliser cette possibilité quand c'est le plus pratique. Mais il ne faut pas abuser de cette technique, car ce n'est pas une pratique courante et donc un autre développeur pourrait mettre beaucoup de temps à comprendre ce que vous faites !
Code complet ici :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScriptLoaderModule, ScriptLoaderService } from 'src/app/script-loader';
import { LazyPageComponent } from './lazy-page.component';
@NgModule({
declarations: [LazyPageComponent],
imports: [
CommonModule,
ScriptLoaderModule,
],
exports: [LazyPageComponent],
})
export class LazyPageModule {
constructor(scriptLoader: ScriptLoaderService) {
scriptLoader.loadScript('https://my.enterprise.domain.fr/my.dynamic.webcomponent.js');
}
}