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, nous ajoutons dans cette page ce qui a changé par rapport à ce que nous avions vu en formation.


Mettre à jour Angular

Pour les mises à jour mineures d’Angular, il suffit de lancer :

npm update

Pour le CLI :

npm install @angular/cli@latest

npm install @angular/cli@latest -g


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 ».

Angular CLI 1.7

15 février 2018

Commande de mise à jour

La commande ng update fait son apparition. En l’état, elle ne nous paraît pas satisfaisante car elle fige les versions dans le package.json. Pour l’instant, nous vous conseillons de continuer à faire vos mises à jour mineures avec npm update. Nous verrons à la sortie d’Angular 6 si la commande du CLI est plus intéressante pour des mises à jour majeures.


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 :


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 :


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 :

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

Les requêtes HTTP sont maintenant beaucoup plus simples :

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 :

Parlez de notre formation Angular autour de vous !