Angular est un framework permettant d’implémenter des applications Javascript front-end exécutées coté client sous forme de Single Page Application (i.e. application web monopage). Le langage utilisé pour implémenter des applications Angular est Typescript.

Le but de cet article est d’indiquer les caractéristiques et les éléments de syntaxe principaux d’Angular en partant de zéro c’est-à-dire sans avoir de connaissances préalables sur le framework, sur Javascript ou sur d’autres technologie web. Le but n’est pas de paraphraser la documentation angular.io mais de donner un point de départ pour comprendre les éléments les plus importants du framework.

Avant de rentrer dans les détails de la syntaxe, on va indiquer quelques éléments de contexte pour mieux comprendre Angular.

Quelques généralités

Angular vs. AngularJS

Initialement, la première version d’Angular était implémentée en Javascript. Après cette première version, l’équipe d’Angular a réécrit tout le framework en Typescript. Cette nouvelle version en Typescript correspondait à Angular 2. Les versions suivantes d’Angular sont toutes en Typescript toutefois la première version est encore maintenue car c’est la seule qui soit en Javascript. Pour éviter la confusion la version 1 d’Angular en Javascript est appelée AngularJS; toutes les versions suivantes sont appelées Angular.

La maintenance des 2 frameworks est distincte, toutefois l’arrêt de la maintenance d’AngularJS est programmmé pour le 31 décembre 2021^(*).

Typescript vs. Javascript

Malgré ce titre, ces 2 langages ne sont pas opposés car le code Typescript est transpilé en Javascript pour être exécuté. Fonctionnellement, le code Typescript apporte des améliorations de syntaxe par rapport au Javascript dans le but de l’enrichir et de le sécuriser du point de vue du typage et de la vérification syntaxique avant l’exécution. Ces points sont, toutefois, de moins en moins vrais avec l’avènement d’EcmaScript 6 (i.e. EcmaScript 2015).

Le code Typescript n’est utilisé que pour la programmation, il est transpilé en Javascript pour être exécutable sur les browsers. Le transpilage est effectué par un compilateur.

Pour davantage de détails sur la syntaxe Typescript, voir L’essentiel de la syntaxe Typescript en 10 min.

Single Page Application (i.e. SPA)

Angular permet de faciliter l’implémentation d’application s’exécutant en mode Single Page Application. Les applications SPA permettent d’améliorer l’expérience utilisateur lorsqu’elles sont exécutées sur un browser puisqu’elles évitent de devoir recharger toute la page entre différentes actions. Toutefois elles sont plus complexes à implémenter puisqu’elles nécessitent d’être exécutées principalement sur le browser d’où l’avènement de frameworks aidant à leur implémentation comme React, Vue.js, Knockout.js ou Angular.

Dans le cas d’Angular, il faut garder en tête que le code est principalement exécuté coté client et non du coté du serveur comme, par exemple, pour ASP.NET MVC. Ainsi tout le code doit être chargé par le browser pour être exécuté. Ce chargement peut poser quelques problèmes:

• d’abord en terme de temps de chargement puisque plus le code est volumineux et plus il prendra du temps pour être chargé par le browser. Il existe des optimisations comme la minification du code pour en réduire la taille, l’utilisation de cache avec les content delivery networks (i.e. CDN) ou le chargement de modules par lazy-loading.
• Ensuite, sachant que le code se trouve du coté du browser, des problèmes de sécurité peuvent survenir puisque le code est lisible directement sur le browser. Il existe des méthodes pour sécuriser les traitements par exemple en permettant le chargement conditionnel de modules d’une application en fonction des droits de l’utilisateur identifié.

Le plus souvent, une application Angular est exécutée dans le browser en effectuant un rendu des pages en utilisant le DOM. Toutefois il est possible d’exécuter une application coté serveur en générant des pages statiques avec la fonctionnalité Angular Universal.

DOM

Une page HTML est composée d’éléments avec une certaine hiérarchie (comme html, body, div, span, p, a etc…). Ces éléments peuvent être représentés dans un graphe d’objets qui est appelé DOM (i.e. Document Object Model). Ce DOM est utilisé par les navigateurs pour déterminer les objets qui peuvent être rendus à l’écran. En s’interfaçant avec le DOM avec du code Javascript, il est possible de modifier le contenu, la structure et le style de la page.

Invervenir fréquement dans le DOM est couteux en performance. Angular utilise le DOM pour s’interfacer avec les objets de la page, toutefois il minimise autant que possible les parcours et les modifications du DOM pour améliorer les performances. Une partie importante du framework est de procéder par incrémentation en cherchant à détecter des changements lorsqu’un évènement survient sur la page. En cas de changement détecté, le framework intervient dans le DOM en minisant le parcours du graphe d’objets et le nombre de modifications. Cet aspect de détection de changements est transparent pour le développeur.

Attributs et propriétés

Les caractéristiques des éléments HTML peuvent être précisées ou modifiées avec des attributs, par exemple:

<button name="clickMeButton">Click me</button>

Dans cet exemple name est un attribut de l’élément HTML button.
Les attributs peuvent posséder une valeur sous forme de chaînes de caractères ou ils peuvent ne pas avoir de valeur. Dans l’exemple suivant, disabled est un attribut sans valeur:

<button name="clickMeButton" disabled>Click me</button>

Symétriquement aux attributs, les objets du DOM possèdent des propriétés. Par exemple, le code Javascript suivant permet de créer un élément dans le DOM et de paramétrer la propriété innerHtml:

var btn = document.createElement("BUTTON");
btn.innerHTML = "Click me";
document.body.appendChild(btn);

De la même façon, on peut affecter une valeur à la propriété disabled équivalente à l’attribut du même nom:

btn.disabled = true;

La plupart du temps, les attributs servent à initialiser les propriétés toutefois ils ne sont pas modifiés si la valeur des propriétés change. Il peut exister un mapping strict entre les attributs et les propriétés (comme par exemple id). Dans certains cas, il n’existe pas de propriété correspondant à un attribut (par exemple: l’attribut colspan de l’élément td). Enfin pour d’autres cas, une propriété peut ne pas avoir de correspondance en attribut (comme textContent).
Angular utilise différent type de bindings pour affecter des valeurs aux propriétés des objets. Ces objets sont des élément HTML, des composants ou des directives.

Webpack

Angular est un framework utilisant de nombreux projets comme par exemple: Typescript, Node.js, RxJS, jQuery, Karma, Jasmine, Protractor, Babel etc… Parmi ces projets, on peut trouver Webpack qui est une des dépendances les plus importantes.

La fonctionalité initiale de Webpack est de permettre de générer un bundle à partir du code source. Un bundle est un code Javascript optimisé pour permettre un téléchargement et une exécution rapide par le browser. Webpack est un apport important à Angular puisque outre la génération du bundle, il permet de nombreuses autres fonctionnalités:

• Transpilation du code Typescript: le code Typescript, Javascript, CSS, SASS ou less est transpilé en Javascript.
• Permettre l’utilisation des fichiers “source map” pour faciliter le débugage du code Typescript directement dans le browser.
• La prise en compte des différents types de modules (module ES2015, CommonJS, AMD etc…).
• Fonctionnalité HMR (i.e. Hot Module Replacement) pour mettre à jour un module Angular sans avoir à recompiler et à recharger tout le projet.
• Permettre le chargement de module en mode lazy-loading.
• Minifier le code pour minimiser la taille du code Javascript du bundle par exemple, en supprimant les caractères espace, supprimant les variables inutiles ou en diminuant la taille des noms de variables.
• Permettre l’uglification pour rendre le code du bundle plus difficile à lire.

Implémenter une application Angular

La plupart des manipulations d’une application Angular peuvent se faire en utilisant le CLI Angular. Il est possible d’installer le CLI avec le gestionnaire de package NPM.

NPM

Angular nécessite l’installation de Node.js et l’utilisation du gestionnaire de package NPM.

Pour plus de détails sur:

• NPM: voir Les commandes NPM courantes en 5 min
• L’installation de Node.js

Créer une application Angular “from scratch”

On peut rapidement créer une application Angular en utilisant le CLI Angular (i.e. Command Line Interface). Pour installer le CLI Angular avec NPM, il faut exécuter l’instruction suivante:

npm install @angular/cli --global 

Cette commande permet d’installer le CLI dans le répertoire global de NPM. Par défaut, le répertoire global se trouve dans:

• Sur Linux: /usr/local/lib/node ou /usr/local/lib/node_modules/
• Sur Windows: %USERPROFILE%\AppData\Roaming\npm\node_modules

Pour avoir ce chemin, il faut exécuter:

npm config get prefix 

Dans le répertoire node_modules, ng se trouve dans:

node_modules/@angular/cli/bin 

Après avoir installé le CLI Angular, on peut créer un squelette d’une application Angular en exécutant l’instruction:

ng new <nom application> --style css --routing 

Pour compiler l’application, il faut exécuter:

ng build 

Pour exécuter l’application et l’afficher dans un browser (par défaut l’application est accessible à l’adresse http://localhost:4200):

ng serve --watch

Pour avoir davantage de détails sur le CLI Angular et le détail des options, voir Angular CLI en 5 min.

Comment débugger une application Angular ?

En exécutant l’application avec ng serve, il est possible de débugger en pas à pas avec le browser en affichant les outils de développement:

1. Pour afficher les outils de développement dans un browser:
   • Sous Firefox: on peut utiliser la raccourci [Maj] + [F7] (sous MacOS: [⌥] + [⌘] + [Z], sous Linux: [Ctrl] + [Maj] + [Z]) ou en allant dans le menu “Outils” ⇒ “Développement web” ⇒ “Débogueur”.
   • Sous Chrome: utiliser le raccourci [F12] (sous MacOS: [⌥] + [⌘] + [I], sous Linux: [Ctrl] + [Maj] + [I]) puis cliquer sur l’onglet “Sources”. A partir du menu, il faut aller dans “Afficher” ⇒ “Options pour les développeurs” ⇒ “Outils de développement”.
2. Dans l’onglet “Debugger” dans Firefox ou “Sources” dans Chrome, il faut déplier le nœud
   webpack ⇒ src ⇒ app
   ou
   webpack:// ⇒ . ⇒ src ⇒ app
   
3. Il est possible de placer des points d’arrêt en cliquant à coté de la ligne:
   
4. On peut débugguer si on recharge la page avec [F5]:
   

   Ensuite, on peut taper:

   • [F8] pour relancer l’exécution jusqu’au prochain point d’arrêt,
   • [F10] pour exécuter la ligne de code sans entrer dans le corps des fonctions exécutées
   • [F11] pour exécuter la ligne de code en rentrant dans le corps des fonctions exécutées.

   Dans le débugger, on peut accéder à d’autres outils pour vérifier le contenu d’une variable, afficher la pile d’appels ou placer des points d’arrêts lorsque des évènements surviennent:
   

Les principaux objets Angular

Pour permettre d’implémenter une application, Angular met à disposition des objets qui n’apparaîtront pas dans leur forme originelle dans le code Javascript après transpilation. Ces objets proposent un cadre pour organiser l’implémentation du code Typescript, HTML ou CSS. Ces objets sont composées:

• D’une classe Typescript,
• D’un décorateur qui permet d’indiquer quelle est la fonction de l’objet dans l’application. Par exemple, pour définir un composant, on utilise le décorateur @Component():

  @Component()
  export class ExampleComponent {}
  

• De metadonnées qui sont renseignées avec le décorateur et qui permettent d’affiner les caractéristiques d’un objet. Ces métadonnées sont indiquées dans le décorateur, par exemple:

  @Component({
    selector: 'app-example',
    templateUrl: './example.component.html'
  })
  export class ExampleComponent {}
  

Les principaux objets Angular sont:

• Composant (décorateur @Component()): chaque composant comporte un classe, une vue et éventuellement un style CSS. Ils permettent d’implémenter une vue et d’interagir dynamiquement avec les éléments de cette vue.
• Module (décorateur @NgModule()): regroupement logique d’objets de façon à structurer, à faciliter la réutilisation et à partager le code. Il existe différents types de modules:
  • Le Root Module: il en existe qu’un seul qui est obligatoirement chargé au démarrage d’application.
  • Feature Module: ces modules permettent de regrouper des objets Angular par fonctionnalité. Ils peuvent être spécialisés suivant leurs caractéristiques: Domain Feature Module (module regroupant une fonctionalité entière), Service Feature Module (module ne comportant que des services), Widget Feature Module (regroupant des objets graphiques), Routed Module (module chargé en mode lazy-loading) ou Routing Module (permattant la fonctionnalité de routing).
• Service (décorateur @Service()): classe permettant d’effectuer un traitement technique ou de garder en mémoire des objets. L’intérêt des services est de pouvoir être facilement injecté sous la forme d’un singleton ou d’instances distinctes dans des composants ou des directives.
• Directive (décorateur @Directive()): objet permettant d’enrichir des éléments HTML. La différence entre un composant et une directive est que la directive ne possède pas de vue. Elle modifie des éléments HTML par programmation. Il existe 2 types de directives:
  • Structural directive: elle modifie le rendu graphique en ajoutant, supprimant ou en remplaçant des éléments du DOM.
  • Attribute directive: elle altère l’apparence ou le composant d’un élément HTML.
• Pipe (décorateur @Pipe()): cet objet permet de transformer les données avant de les afficher en utilisant une syntaxe du type {{ expression | filter }}.

Détails d’une application Angular

Après avoir créé une application en utilisant l’instruction du CLI ng new, on obtient un squelette contenant:

• Des fichiers permettant d’afficher une vue:
  • src/index.html: premier fichier HTML permettant de tirer la code Javascript et d’exécuter l’application.
  • src/main.ts: fichier Typescript permettant d’exécuter l’application en indiquant le premier module qui sera chargé.
  • src/app: répertoire contenant le code de l’application et en particulier:
    • le module principal AppModule dans app.module.ts,
    • éventuellement le module de routing AppRoutingModule dans app-routing.module.ts,
    • le composant AppComponent dans les fichiers app.component.ts, app.component.html et app.component.css.
  • src/styles.css: ce fichier est vide toutefois il permet de définir des styles et classes CSS utilisables dans l’application.
• Des répertoires comme:
  • dist: répertoire de sortie par défaut des résultats de compilation (ce répertoire peut être modifié dans tsconfig.json).
  • nodes_modules: ensemble des packages NPM des dépendances de l’application.
  • src/environnements: éléments de configuration pour les différentes configuration de compilation (développement, production, etc…). Ce répertoire peut être modifié dans angular.json.
  • e2e: répertoire contenant les tests de “bout en bout” (i.e. end-to-end tests).
• Des fichiers de configuration comme:
  • angular.json: ce fichier permet d’apporter des éléments de configuration pour le CLI Angular comme par exemple: les différents mode de configuration (dévelopement, production etc…); les indications des répertoires contenant les sources, répertoire de sortie, fichier de style; les éléments de configuration pour les commandes du CLI.
  • tsconfig.json: ce sont les options de compilation du compilateur Typescript.
  • package.json: éléments de configuration de NPM c’est-à-dire les actions à exécuter au lancement de scripts avec NPM; les dépendances de package.
  • Karma.conf.js: fichier de configuration du runner de tests Karma.
  • tslint.json: fichier de configuration du linter tslint (outil permettant d’augmenter la qualité du code). Tslint est remplacé par ESLint à partir d’Angular 11.

Si on exécute l’instruction du CLI ng serve --watch, on obtient l’affichage de l’application dans le browser à l’adresse http://localhost:4200 par défaut. Pour comprendre cet affichage, on peut suivre l’ordre d’exécution des différents objets en partant des fichiers src/index.html et src/main.ts:

1. Les fichiers src/index.html et src/main.ts font partie de l’amorce de l’application car ils sont indiqués dans le fichier de configuration angular.json au niveau de "projects" ⇒ "<nom du projet>" ⇒ "architect" ⇒ "build" ⇒ "options":

   "options": {
     "index": "src/index.html",
     "main": "src/main.ts"
   }
   

2. src/index.html: ce fichier est le point de départ lorsque le browser charge les fichiers de l’application. Dans ce fichier se trouve plusieurs éléments importants:

   <!doctype html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>Example</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
   </head>
   <body>
     <app-root></app-root>
   </body>
   </html>
   

   Dans ce code, on peut voir les lignes:

   • Base href:

     <base href="/">
     

     Cette ligne permet d’indiquer au browser l’adresse du base de l’application. Suivant la stratégie de routing utilisée (PathLocationStrategy ou HashLocationStrategy) si l’URL est modifiée:

     • après la partie href: il n’y aura pas d’appels au serveur web. Le traitement sera effectué par l’application Angular dans le browser.
     • avant la partie href: un appel est effectué au serveur web.
   • Appel au composant principal:

     <body>
       <app-root></app-root>
     </body>
     

     Cette indication permet d’instancier le composant dont le paramètre selector dans le décorateur @Component() est app-root. Ce composant est src/app/app.component.ts.

3. src/main.ts: ce fichier permet de charger le Root Module grâce aux lignes:

   import { AppModule } from './app/app.module';
   platformBrowserDynamic.bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

4. src/app/app.module.ts: il s’agit du Root Module de l’application. Il permet de charger tous les objets Angular:

   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   Dans l’implémentation, le Root Module charge:

   • Le module BrowserModule,
   • Le module de routing AppRoutingModule dans le fichier src/app/app-routing.module.ts,
   • Le composant AppComponent dans src/app/app.component.ts.
5. src/app/app.component.ts: il s’agit du composant principal, il est affiché car il est appelé par <app-root></app-root> dans src/index.html. La vue de ce composant (i.e. fichier template) est src/app/app.component.html. La ligne importante de la vue est:

   <router-outlet></router-outlet>
   

   Cette ligne permet d’appeler le module de routing dans src/app/app-routing.module.ts.

6. src/app/app-routing.module.ts: ce fichier est le module de routing. Il permet de rediriger l’affichage vers la vue d’un composant en fonction de ce qui est indiqué dans l’URL après la partie href:

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

   Etant donné qu’aucune route n’est configurée, ce module ne dirigera l’affichage que vers le composant principal dans src/app/app.component.ts.

Pour aller plus loin…

Les fonctionnalités principales d’Angular sont détaillées dans d’autres articles:

1. Les composants: un composant correspond à une unité d’implémentation permettant d’afficher une vue. Chaque composant est formé:
   • D’une vue appelée template: cette partie comporte du code HTML enrichi. Elle permet d’implémenter les objets à afficher.
   • D’une classe en Typescript permettant d’exécuter des traitements utilisables par la vue.

   Les articles détaillants les fonctionnalités des composants sont:

   • Les vues: passe en revue les éléments les plus importants pour implémenter un template.
   • Les composants enfant: pour imbriquer un ou plusieurs composants dans un autre.
   • Requêter les éléments d’une vue: cette article explicite différentes méthodes pour requêter des éléments d’une vue à partir de la classe d’un composant.
   • Appliquer un style CSS à une vue
2. Injection de dépendances: cet article détaille la fonctionnalité d’injection de dépendances d’Angular.
3. Les modules (article à venir)
4. Le routing (article à venir)
5. La détection de changements: il s’agit d’une fonctionnalité importante qui permet de lier les templates aux classes en utilisant différent type de bindings.
   • Personnaliser la détection de changement
   • Expliquer le fonctionnement de la détection de changement
6. Les directives: ces objets permettent de modifier ou d’enrichir un élément du DOM en rajoutant ou en modifiant une propriété par programmation.
7. Angular CLI: décrit les commandes les plus importantes du CLI Angular.

Détails des versions d’Angular

Pour terminer, le tableau suivant résume les fonctionnalités d’Angular suivant les versions:

Version	Date	Dépendances	Fonctionnalités importantes
AngularJS	Octobre 2010		Appelée AngularJS, c’est la première version d’Angular écrite Javascript. La dernière version majeure est la 1.8.
Angular 2	Septembre 2016	Typescript 2.0 RxJs: 5.0 TsLib: N/A Node 5.4 Webpack: 1.12	Angular 2 correspond à la réécriture d’AngularJS en Typescript
Angular 4	Mars 2017	Typescript 2.1 RxJs: 5.5 TsLib: N/A TSLint 3.15 Node: 6.9 Webpack: 1.7	Pas de release en version 3. Cette version ne comporte pas de fonctionnalités majeures par rapport à la version 2: Compilation plus rapide Les animations ne sont plus dans @angular/core La directive *ngIf supporte else. Les animations ne sont plus dans @angular/core mais dans @angular/platform-browser/animations. Renderer2 remplace Renderer dans @angular/core. Intégration de Angular Universal qui permet d’exécuter un pré-rendu (pre-rendering ahead of time) d’une application Angular coté serveur de façon à améliorer, le cas échéant, les performances, permettre de répondre aux problématiques SEO (Search Engine Optimization) et des aperçus effectués par les médias sociaux.
Angular 5	Novembre 2017	Typescript 2.4 RxJs: 5.5 TsLib 1.7 TSLint 5.7 Node: 6.9	Amélioration de la compilation Activation de la fonctionnalité Build Optimizer par défaut. Cette fonctionnalité permet de réduire la taille du bundle résultant de la compilation. Support de l’API Transfer State dans Angular Universal pour éviter la double création des objets XMLHttpRequest (i.e. XHR) coté client et coté serveur lorsque la vue client est créée. @angular/http est remplacé par @angular/common/http. HttpModule est remplacé par HttpClientModule dans @angular/common/http. Pour les pipes Plural, Decimal, Percent et Currency, l’internationalisation est supportée avec l’introduction du paramètre locale permettant de prendre en compte les spécificités régionales. Ajout d’une option updateOn dans les objets FormControls, FormGroups et FormArrays permettant de retarder la mise à jour des controls jusqu’à ce qu’un évènement blur, submit ou change soit lancé. Cette option peut être rajouté sur les objets ngForm ou ngModel avec le paramètre, respectivement, ngFormOptions ou ngModelOptions. Ajout du package @angular/service-worker.
Angular 6	Mai 2018	Typescript 2.7 RxJs: 6.0 TsLib: 1.7 TSLint: 5.7 Node: 8.9	Les packages du framework sont synchronisés à la version 6.0.0. Les commmandes ng update et ng add sont rajoutés au CLI Angular pour respectivement mettre à jour ou ajouter un package NPM. Ajout de Angular Elements (@angular/elements) pour créer des éléments HTML personnalisés. Ajout du Component Dev Kit (@angular/cdk) pour permettre le développement de composant et tirer partie des fonctionnalités de Angular Material (@angular/material). Amélioration de Angular Material (@angular/material) avec de nouveaux schematics accessibles avec le CLI Angular pour générer des modèles pour faciliter l’implémentation de composants de Material. Adaptation du CLI pour utiliser des workspaces pour avoir plusieurs projets ou bibliothèques dans un même workspace. Fonctionnalité de tree-shaking pour les services: cette fonctionnalité est une optimisation pour éviter d’inclure dans la build finale, des services qui ne sont jamais utilisés.
Angular 7	Octobre 2018	Typescript: 3.1 RxJs: 6.3 TsLib: 1.7 TSLint: 5.7 Node: 10.9	Amélioration du CLI Angular avec les CLI Prompts pour poser des questions lors de l’exécution de commandes du CLI et éviter l’utilisation d’options. Ajout des bundle budgets dans le CLI pour contrôler la taille des bundles. Ajout du Virtual Scrolling et du Drap and Drop dans Angular Material (@angular/material) et CDK (@angular/cdk). Support de la projection de contenu dans Angular Elements (@angular/elements). Amélioration des performances.
Angular 8	Mai 2019	Typescript: 3.4 RxJs: 6.4 TsLib: 1.9 TSLint: 5.7 Node: 10.9	Activation du Differential Loading par défaut permettant au browser de choisir un bundle Javascript en fonction de ses caractéristiques. Imports dynamiques (i.e. Lazy-loading) dans la configuration des routes. Builder API dans le CLI pour personnaliser des commandes comme ng serve, ng build, ng test, ng lint ou ng e2e en permettant l’exécution de fonctions. Support des web workers pour exécuter des threads en arrière-plan. Le CLI supporte la création de web workers avec ng g web-worker. Ajout des méthodes AbstractControl. markAllAsTouched() pour marquer les éléments d’un formulaire comme “touched” et FormArray.clear() pour vider tous les controls dans un objet FormArray.
Angular 9	Février 2020	Typescript: 3.7 RxJs: 6.5 TSLib: 1.10 TSLint: 5.7 Node: 10.9	Ivy est utilisé par défaut comme compilateur et moteur de rendu. Les fonctionnalités et les performances d’Ivy sont meilleures que le view engine utilisé dans les versions précédentes notamment avec un rendu plus rapide avec la compilation AOT, la fonctionnalité tree-shaking, une meilleure capacité de debug, l’exécution plus rapide des tests et un runtime qui permet de mettre à jour le DOM de façon plus performante. Deux nouvelles options pour le paramètre providedIn du décorateur @Injectable() utilisé pour les services: 'platform' pour indiquer qu’un service est disponible à partir d’un injecteur singleton de niveau “platform”. Cet injecteur est partagé par toutes les applications de la page. any pour fournir une instance unique d’un service pour tous les modules. Les composants Youtube et Google Maps ont été rajoutés à Angular Material.
Angular 10	Juin 2020	Typescript: 4.0 RxJs: 6.5 TSLib: 2.0 TSLint: 6.0 Node: 10.9	Nouveau composant Date Range Picker dans Angular Material. Warnings à la compilation quand des packages utilisent des imports CommonJS. Ajout de l’option --strict pour la création de nouveaux workspaces avec ng new. Cette option active des paramètres permettant de signaler des bugs plus en amont et autorise le CLI à effectuer des optimisations avancées.
Angular 11	Novembre 2020	Typescript: 4.0 RxJs: 6.5 TsLib: 2.0 TSLint: 6.1 Node: 10.9	Inlining automatique des polices de caractères dans index.html. Les polices sont automatiquement téléchargées et configurées en inline dans index.html par le CLI à la compilation. La fonctionnalité est activée par défaut mais peut être désactivée avec les paramètres suivants dans angular.json: "configurations": { "optimization": true } Et "configurations": { "optimization": { "fonts": false } } Ou "configurations": { "optimization": { "fonts": { "inline": false } } } Les logs et le report d’erreurs ont été améliorés dans les retours sur la console du CLI. L’utilisation de la fonctionnalité Hot Module Replacement (HMR) est facilitée pour les développeurs. Cette fonctionnalité permet de remplacer des modules sans rafraîchir tout le browser. HMR existait dans les versions précédentes d’Angular mais l’ajout d’une option dans la commande ng serve du CLI permet de faciliter son utilisation en développement: ng server --configuration hmr TSLint est remplacé par ESLint. Dans la configuration des routes, il désormais est possible de configurer des router outlets nommés (Named outlets) pour un composant se trouvant dans un module chargé en mode lazy-loading.