Angular changelog

Votre formation Angular est terminée, mais le framework continue de se mettre à jour, à un rythme assez soutenu. Pour vous accompagner, lorsque de nouvelles versions d’Angular sont disponibles, j’ajoute dans cette page ce qui a changé par rapport à ce que nous avions vu en formation.


Angular 16

3 mai 2023

Pour mettre à jour :

ng update @angular/cli @angular/core

Signals

Dans la communauté, tout le monde ne parle que ça. Cependant, les signals ne sont pour l’instant que très partiellement implémentés, et en « preview ». Il vaut probablement mieux attendre Angular 17 pour songer à basculer sur ce nouveau système.

Même alors, soyez vigilants à ne pas vous laisser emporter par l’effet de mode. S’ils sont effectivement plus simples, c’est parce qu’à la différence des Observables, les Signals sont synchrones. Les services asynchrones (comme le AuthService) devront donc toujours utiliser un ReplaySubject, sans quoi vous tomberez dans le même piège qu’avec un BehaviorSubject (grossièrement, un Signal est un équivalent simplifié et synchrone d’un BehaviorSubject).

Gardes fonctionnels

Une syntaxe allégée sous forme de simple fonction est apparue pour les gardes. L’ancienne syntaxe sous forme de classe est dépréciée et sera supprimée dans Angular 17. La migration semble être automatique avec la version 16.


Angular 15

17 novembre 2022

Pour mettre à jour  :

ng update @angular/cli @angular/core

Standalone components

Angular 15 est une grosse mise à jour du framework, car elle introduit les standalone components (composants autonomes), ce qui permet de faire disparaître la notion de NgModule. Si cela simplifie certains aspects, cela en complique d’autres, particulièrement en l’état actuel des outils de développement, qui sont toujours faits pour travailler avec des NgModules et ne sont pas encore à jour avec ce nouveau système.

Rassurez-vous, les NgModules restent là, et toute la façon de travailler que nous avons vu en formation, et notamment l’architecture, est toujours possible. D’ailleurs, la documentation et la génération des projets avec ng new est toujours basée sur les NgModules pour l’instant.

Malgré tout, à long terme, c’est probablement de plus en plus vers les composants autonomes que le chemin d’Angular va se tourner, il faudra donc y jeter un oeil. Si vous voulez faire une demi-journée ou une journée de mise à jour (sur ce point et toutes les autres nouveautés), n’hésitez pas à me contacter.

Material MDC

C’est aussi une grosse mise à jour pour Material, qui se base désormais sur les Material Design Components, pour plus d’interopérabilité et plus de fonctionnalités.

Par défaut, ng update vous laissera sur l’ancien système et donc tout continuera à fonctionner normalement. Mais si vous voulez passer au nouveau système, prévoyez d’importants changements graphiques et un certain temps de réajustement de votre CSS. Il faudra avoir migré d’ici la version 17.

Un guide complet de migration est disponible.


Angular 14

2 juin 2022

Pour mettre à jour  :

ng update @angular/cli @angular/core

Typed reactive forms

Les reactive forms sont désormais typés correctement. La migration maintiendra votre projet dans l’ancien système pour éviter toute cassure, en utilisant UntypedFormControl et UntypedFormGroup. Pour profiter du nouveau système, gardez les FormControl et FormGroup.


Schematics Pro 2.0

30 mars 2022

Vous avez adoré l’extension Angular Schematics pour Visual Studio Code en formation et vous continuez à vous en servir tous les jours ?

Votre formateur préféré vient de lancer Schematics Pro, une version étendue. Elle contient :

  • des fonctionnalités encore plus avancées pour Angular (automatisation de la gestion des points d’entrée, des routes pour les pages, etc.)
  • la génération de code pour les autres frameworks également : React, Vue, Ionic, Svelte, Stencil, Lit, Nest et plus encore
  • la création rapide et facile de modèles de code personnalisés

N’hésitez pas à en parler autour de vous.


Angular 13

3 novembre 2021

Pour mettre à jour  :

ng update @angular/cli @angular/core

TSLint > ESLint

TSLint n’est plus supporté, la migration vers ESLint devient obligatoire. Voir l’article du blog pour mettre à jour vers ESLint.

IE 11

Internet Explorer 11 n’est plus supporté. Voir l’article du blog.

RxJS 7

Angular supporte à la fois RxJS 6 et 7. Il est préférable de mettre à jour RxJS :

npm install rxjs@^7.4.0

A noter que tous les imports se font désormais depuis 'rxjs' :

import { Observable, map } from 'rxjs';

Au lieu de :

import { Observable } from 'rxjs';

import { map } from 'rxjs/operators';

Les anciens imports fonctionnent toujours dans RxJS 7 mais sont dépréciés.

Détail

Dans le projet de la formation, styles: ["@angular/material/..."] a dû être remplacé par styles: ["./node_modules/@angular/material/..."] dans angular.json (présent 2 fois).


Angular 12

12 mai 2021

Pour mettre à jour  :

ng update @angular/cli @angular/core

Mode strict

Le mode strict est désormais automatique lors de la création d’un nouveau projet Angular.

Build en production par défaut

Pour les nouveaux projets, ng build fonctionne désormais automatiquement en mode production. Pour migrer vers cette nouvelle configuration dans les projets existants :

ng update @angular/cli --migrate-only production-by-default

TSLint > ESLint

TSLint n’est plus installé dans les nouveaux projets. Voir l’article du blog pour mettre à jour vers ESLint.

Protractor

Protractor est toujours fonctionnel mais n’est plus installé par défaut dans les nouveaux projets. Voir l’article du blog pour mettre à jour vers Cypress.

IE 11

Le support d’Internet Explorer 11 est toujours fonctionnel mais déprécié dans Angular 12. Il sera supprimé dans Angular 13.


Angular 11

11 novembre 2020

Pour mettre à jour  :

ng update @angular/cli @angular/core

C’est tout. 🙂

IE 9-10

Le support d’Internet Explorer 9 & 10 est fini. IE 11 est toujours supporté.


Angular 10

25 juin 2020

Pour mettre à jour  :

ng update @angular/cli @angular/core

C’est tout. 🙂


Angular 9

6 février 2020

Pour mettre à jour  :

ng update @angular/cli @angular/core

C’est tout. 🙂

Types de composants

Angular 9 ajoute une nouvelle option lors de la génération des composants :

ng g component --type page

Cela permet de changer automatiquement le suffixe du fichier et de la classe de votre composant. Cela peut paraître être un détail, mais cela aide grandement à s’y retrouver dans l’architecture !

Combinez cela aux nouveautés que vous avez dû constater dans l’extension VS Code Angular Schematics de votre formateur préféré, et tout cela se fera tout seul. Explications détaillées dans cet article.

Angular Language Service

L’extension angular2-inline pour Visual Studio Code n’est plus nécessaire. L’extension officielle Angular Language Service se charge désormais de la coloration syntaxique de vos templates inlines. Elle propose également une meilleure autocomplétion.

@angular/localize

Le multilingue a été grandement simplifié : plus besoin de faire un script pour chaque build ! Documentation.


Angular 8

28 mai 2019

Pour mettre à jour  :

ng update @angular/cli @angular/core

C’est tout. 🙂

Lazy-loading

La syntaxe du lazy-loading a changé :

L’ancienne fonctionne toujours mais est dépréciée, et la migration devrait se faire automatiquement.

Assistance pour la configuration des PWA

Grâce au PR de votre formateur préféré, vous serez désormais assisté dans le fichier ngsw-config.json, pour tirer pleinement partie des Service Workers d’Angular.


Visual Studio Code 1.30

12 décembre 2018

La nouvelle version de VS Code va vous permettre de gagner en productivité.

Nouvelle extension TSLint

Jusqu’à maintenant, chaque outil qui vous assistait (TypeScript, TSLint, Angular Language Service…) analysait le code chacun de son côté. Les dernières améliorations de VS Code permettent désormais que le code soit analysé une seule fois pour tous les outils.

Pour en profiter, désinstallez l’ancienne extension TSLint au profit de la nouvelle (par Microsoft, c’est désormais une extension officielle).

Cela profitera notamment à celles et ceux d’entre vous qui n’ont pas la chance d’avoir des postes performants. 😉

Lancement automatique de l’environnement

Vous en avez marre de relancer la compilation à chaque fois que vous redémarrez VS Code ? Il est désormais possible de lancer une commande automatique quand vous ouvrez votre projet !


Node 10 LTS

30 octobre 2018

La nouvelle version LTS de Node.js est désormais la version 10.

Nous vous conseillons de mettre à jour dès que possible, car cela peut accélérer les installations npm et les builds d’Angular de façon conséquente.


Angular 7

18 octobre 2018

Pour mettre à jour depuis Angular 6 :

ng update @angular/cli @angular/core

Autres changements à réaliser : aucun. 🙂


Angular schematics extension for Visual Studio Code

21 juin 2018

Grâce à votre formateur préféré, une extension pour Visual Studio Code vous permet désormais de générer facilement vos composants et services Angular ! Si vous aimez, pensez à noter l’extension. 😉


Angular 6

3 mai 2018

Il s’agit d’une mise à jour importante, nous avons donc réalisé un article dédié à la migration vers Angular 6 (spoiler : tout est automatisé).


Safari 11.1

30 mars 2018

Progressive Web Apps sur iOS !

Le grand jour est arrivé ! Avec la dernière mise à jour mineure d’iOS 11.3, vos PWAs vont désormais fonctionner également sur iPhone et iPad.

Attention cependant à des détails : Safari ne supporte pour l’instant que les Service Workers, qui permettent à l’application de fonctionner hors ligne. C’est l’essentiel, mais Safari ne gère pas encore :

  • le manifest.json : il vous faudra préciser les icônes avec des balises spécifiques ;
  • l’affichage automatique de la bannière d’installation : l’utilisateur doit aller manuellement dans les options de partage puis choisir l’option « Sur l’écran d’accueil ».

VS Code 1.20

7 février 2018

Auto-imports !

Les auto-imports pour TypeScript sont là et fonctionnent enfin correctement ! Attention cependant à bien sélectionner la bonne suggestion quand certaines classes avec le même nom sont disponibles dans plusieurs packages.

TypeScript 2.7 et mode strict

VS Code utilise désormais la version 2.7 de TypeScript, qui introduit une nouvelle fonctionnalité de vérification en mode strict, qui pose pour l’instant beaucoup de soucis avec Angular, et qui n’est de toute façon pas encore supportée.

Si donc vous aviez activé le mode strict dans son ensemble dans le tsconfig.json, il faut désormais activer les options strictes individuellement, pour ne pas être gêné par les autres :


{
"compilerOptions": {
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitThis": true,
"alwaysStrict": true,
"strictFunctionTypes": true // requires TS >= 2.6
}
}

view raw

tsconfig.json5

hosted with ❤ by GitHub


Angular 5.2

10 janvier 2018

TypeScript 2.6

Les versions 2.4 et 2.5 sont toujours supportées, mais vous pouvez maintenant mettre à jour vers TypeScript 2.6 :

npm install typescript@2.6 -D

Pensez ensuite à bloquer TypeScript en version mineure dans le package.json : ~2.6.2.


Angular CLI 1.6

6 décembre 2017

PWA : service worker final

Angular 5 avait rendu disponible en version finale le package service-worker qui permet de réaliser une Progressive Web App, et le support est désormais direct dans le CLI. Il faut l’anticiper à la création de l’application :

ng new myapp --service-worker

Pour intégrer les service workers à une application existante, un nouveau chapitre dédié a été ajouté dans la documentation officielle.

Attention : si vous utilisiez déjà la version beta en production, il faut faire en sorte d’invalider le précédent service worker.

Universal

Pour faire toute la configuration d’Universal côté front, il suffit maintenant de faire :

ng g universal chooseaspecificappnameforuniversal

Pour le côté serveur, vous trouverez un complément d’information dans un billet de votre formateur préféré sur Medium.


Angular Material 5.0

6 décembre 2017

Après de longs mois d’attente, Material est enfin disponible en version stable. Pour le mettre à jour :

npm install @angular/{cdk,material}@5

Changement du préfixe Md > Mat

Le préfixe md est remplacé par mat. L’outil Material Prefix Updater est fourni pour faciliter le refactoring. Par exemple :

  • modules : MdInputModule devient MatInputModule
  • composants : <md-card> devient <mat-card>
  • directives : mdInput devient matInput

Par ailleurs, le composant <md-input-container> devient <mat-form-field>.

Flex Layout

Malheureusement, Flex Layout, toujours en beta, n’a pas suivi Material, et est particulièrement instable. Nous avons décidé d’arrêter d’utiliser et de suivre ce module pour l’instant. L’équivalent en CSS est tout aussi efficace.


Angular 5.1

6 décembre 2017

TypeScript 2.5

Ajout du support de TS 2.5, mais depuis, Angular 5.2 supporte TS 2.6 (voir ci-dessus).


Angular 5.0

1er novembre 2017

Mise à jour des dépendances

Pour le mettre à jour :

npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@5 rxjs@5.5

Et :

npm install @angular/{compiler-cli,language-service}@5 codelyzer@4 typescript@2.6 -D

Pensez ensuite à bloquer TypeScript en version mineure dans le package.json : ~2.6.2.

Rétrocompatibilité

Et on ne vous a pas menti quand on vous disait de ne pas vous inquiéter : l’application que nous avions réalisée en formation est directement compatible, il n’y a rien à changer !

Seuls des détails sur des points avancés ont pu changer (notamment l’usage de différentes langues pour les filtres de dates). Une aide à la migration est disponible ici.

Il y a bien sûr quelques nouveautés, mais qui sont facultatives.

RxJS 5.5 : lettable operators

Vous vous souvenez que les imports des opérateurs RxJS étaient laborieux ? L’ancien système fonctionne toujours, mais vous pouvez maintenant utiliser une meilleure syntaxe avec les pipeable operators.

AOT en développement

Vous ne voulez pas avoir de surprise lors du passage en production ? La compilation AOT peut désormais être active dès la phase de développement. Modifiez simplement votre script npm start en ng serve --aot.


Angular CLI 1.5

1er novembre 2017

Build optimizer

Les optimisations avancées pour le build de production sont maintenant activées par défaut. Vous pouvez donc raccourcir votre script npm de build à ng build --prod.

Gain avec notre application : poids des fichiers diminué de 35% environ !


Angular CLI 1.4.8

18 octobre 2017

Options par défaut

Grâce au PR de votre formateur préféré, les options que vous choisissez lors de la création de votre application avec ng new (comme inline-templateskip-tests,…) sont désormais automatiquement enregistrées comme options par défaut dans .angular-cli.json. Plus besoin de les ajouter manuellement, et les commandes de génération les prendront en compte.


VS Code 1.16

1er septembre 2017

Deux problèmes importants liés au quick fix d’import automatique sont réglés :

  • les bons guillemets sont utilisés !
  • les bons chemins sont proposés !

Angular CLI 1.3

10 août 2017

Configuration du proxy

En développement, la configuration du proxy est facilitée. Au lieu de devoir indiquer l’option --proxy-config dans chaque commande ng ou npm qui en a besoin (même si cela est toujours possible), vous pouvez l’indiquer une bonne fois pour toutes dans .angular-cli.json :


{
"defaults": {
"serve": {
"proxyConfig": "proxy.conf.json"
}
}
}


Angular 4.3

14 juillet 2017

Nouvelle API HttpClient

Les requêtes HTTP sont grandement simplifiées grâce à une toute nouvelle API ! L’ancienne reste disponible mais est dépréciée à partir d’Angular 5.

Il faut d’abord importer un module différent dans votre AppModule ou CoreModule :


import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [HttpClientModule]
})
export class CoreModule {}

view raw

core.module.ts

hosted with ❤ by GitHub

Notez que l’API se trouve dans un package différent.

Les requêtes HTTP sont maintenant beaucoup plus simples :


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Movie } from '../models/index';
@Injectable()
export class CinemaService {
constructor(protected http: HttpClient) {}
getMovies() {
return this.http.get<Movie[]>(`/api/movies`);
}
}

Avantages :

  • JSON par défaut, plus besoin de transformer le résultat !
  • typage plus simple et plus efficace,
  • en conséquence, plus besoin des imports de RxJS !
  • et d’autres nouveautés à découvrir dans la documentation.

Dernier avantage et non des moindres : vous aviez souffert de tester des services qui font des requêtes HTTP ? La simulation des requêtes est désormais plus simple :


import { TestBed, inject } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient } from '@angular/common/http';
import { CinemaService } from './cinema.service';
import { Theater } from '../models/index';
describe('CinemaService', () => {
let theaters: Theater[];
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [CinemaService]
});
});
it('should contain theaters data', inject([CinemaService, HttpClient, HttpTestingController],
(service: CinemaService, http: HttpClient, httpMock: HttpTestingController) => {
service.getTheaters().subscribe((data) => {
expect(data[0].id).toEqual(1);
});
theaters = [
{
id: 1,
title: `Test`,
address: `test`,
logo: {
src: 'static/images/theaters/test.png'
}
}
];
const req = httpMock.expectOne('/api/theaters');
req.flush(theaters);
httpMock.verify();
}));
});

Parlez de notre formation Angular autour de vous !