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 :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "compilerOptions": { | |
| "noImplicitAny": true, | |
| "strictNullChecks": true, | |
| "noImplicitThis": true, | |
| "alwaysStrict": true, | |
| "strictFunctionTypes": true // requires TS >= 2.6 | |
| } | |
| } |
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 :
MdInputModuledevientMatInputModule - composants :
<md-card>devient<mat-card> - directives :
mdInputdevientmatInput
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-template, skip-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 :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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 :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { HttpClientModule } from '@angular/common/http'; | |
| @NgModule({ | |
| imports: [HttpClientModule] | |
| }) | |
| export class CoreModule {} |
Notez que l’API se trouve dans un package différent.
Les requêtes HTTP sont maintenant beaucoup plus simples :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | |
| })); | |
| }); |