Utiliser isolatedModules dans Angular 18.2 (19 août 2024)

Angular prend désormais en charge les isolatedModules de TypeScript depuis Angular 18.2. Grâce à cette prise en charge, les développeurs d'Angular ont constaté des améliorations de performance allant jusqu'à 10 % dans les temps de compilation en production.

Contexte

Lors de l'utilisation du constructeur d'applications dans votre application Angular, si l'option isolatedModules de TypeScript est activée et si les sourcemaps de scripts sont désactivés, le code TypeScript sera transpilé via le bundler au lieu de l'utilisation actuelle de TypeScript. L'utilisation de l'option isolatedModules garantit que le code TypeScript peut être transpilé en toute sécurité sans avoir besoin du vérificateur de types.

Avantages

Activer cette fonctionnalité présente plusieurs avantages. Le bundler, esbuild dans ce cas, connaît maintenant les constructions de code TypeScript, telles que les enums, et peut optimiser le code de sortie. Il peut inclure en ligne les enums const et réguliers lorsque c'est possible. De plus, cela permet de supprimer les passes d'optimisation basées sur Babel pour tout le code TypeScript. Ces passes sont toujours présentes pour tout le code JavaScript, par exemple le code provenant de bibliothèques ou de packages tiers. Ces changements conduisent à une amélioration du temps de compilation, en particulier dans les configurations de production.

Comment le configurer

Pour activer cette fonctionnalité dans votre projet, mettez à jour le fichier de configuration TypeScript de votre projet, généralement tsconfig.json, pour inclure "isolatedModules": true dans la section compilerOptions :

"compilerOptions": {
    ...
    "isolatedModules": true
}

Remarque

Pour assurer une taille optimale du code de sortie avec cette configuration, l'option TypeScript useDefineForClassFields devrait soit être supprimée, soit définie sur true, ce qui permet un comportement conforme aux standards ECMAScript.

Pour en savoir plus sur la fonctionnalité isolatedModules de TypeScript, consultez la documentation. Assurez-vous d'essayer cette mise à jour en exécutant ng update et développez de superbes applications.

Source

Traduction de https://blog.angular.dev/using-isolatedmodules-in-angular-18-2-68a7d3a6c03d