Image
Angular 5
13/12 2017
Thème
Technologie

Angular 5, quoi de neuf ?

Paragraphe

Texte

Après une sortie au mois de mars 2017 d’Angular 4, il est déjà temps d’accueillir Angular 5 en attendant Angular 6 prévu pour mars 2018. Pour ceux qui l’ignore, Angular c'est le nom d’un outil mis à disposition par Google qui sert à donner du bonheur aux développeurs d’application javascript. Du bonheur car l’outil est complet, la communauté nombreuse et qu’il nous permet de nous concentrer avec plaisir sur les problématiques client.

Parmi tous les changements, nous vous invitons à découvrir les plus significatifs.

Titre
Optimisation du build

Texte

A partir de la version 5.0.0, les builds de production créés avec Angular CLI appliqueront l'optimisation par défaut.

L’outil d'optimisation inclus dans Angular CLI a deux objectifs principaux. Le premier est d'améliorer le tree shaking (suppression des parties de l'application qui ne sont pas nécessaires). Le second est de supprimer les décorateurs Angular dont seul le compilateur a besoin.

Chacune de ces actions réduit la taille du build et accélère le démarrage des applications.

Titre
Angular Universal State Transfert API et DOM Support

Texte

Petit rappel, Angular Universal permet d'avoir un pré-rendu coté serveur des applications Angular, ce qui permet de prendre en compte les moteurs de recherche qui ne gèrent pas javascript.

Avec Angular 5.0.0, il est plus facile de partager des données entre la version serveur et la version client. Ce qui permet de ne pas effectuer d'appel HTTP en double pour récupérer des données lorsque la version client reprend la main.

L'équipe d'Angular Universal a aussi ajouté Domino à la platform-server ce qui fournit plus de manipulations du DOM en contexte serveur, améliorant ainsi le support des librairies tierces.

Titre
Amélioration du compilateur

Texte

Amélioration du build incrémental, ce qui permet d'accélérer les rebuilds notamment pour les builds de production et ceux avec AOT (Ahead-of-Time compilation).

Possibilité de supprimer les whitespaces, qui jusque là étaient conservés dans les templates. Il est possible de configurer ça soit au niveau du décorateur de chaque composant soit au niveau global via le fichier tsconfig.json. Le comportement par défaut est « true », mais il est envisagé que dans le futur ce soit « false ».

Au niveau composant :

@Component({	
	templateUrl: 'about.component.html',
	preserveWhitespaces: false
	}
	export class AboutComponent {}

Dans le fichier tsconfig.json

{	
	"extends": "../tsconfig.json",
	"compilerOptions": {
	"outDir": "../out-tsc/app",
	"baseUrl": "./",
	"module": "es2015",
	"types": []
	},
	"angularCompilerOptions": {
	"preserveWhitespaces": false
	},
	"exclude": [
	"test.ts",
	"**/*.spec.ts"
	]
}

 

Titre
Nouveaux pipes pour les nombres, les dates et les devises

Texte

Ce qui permet un comportement plus homogène à travers les navigateurs et d'éliminer le besoin de polyfills pour l'i18n.

Titre
Remplacement du ReflectiveInjector par le StaticInjector

Texte

Là encore cela permet d'éliminer encore plus de polyfills, réduisant la taille des applications pour la plupart des développeurs.

Avant :

ReflectiveInjector.resolveAndCreate(providers);

Après :

Injector.create(providers);

 

Titre
Amélioration de la vitesse de Zone

Texte

Zone est plus rapide par défaut et il est maintenant possible de bypasser zone complètement pour les applications qui ont besoin de performances.

Pour bypasser zone, voici la marche à suivre :

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

 

Titre
exportAs

Texte

Nous pouvons à présent donner plusieurs noms à nos composants et directives, ce qui est très pratique en cas de renommage, cela évite de casser le code existant.

Cette possibilité a été utilisée dans le cas de changement de préfixe d'Angular Material.

Example :

@Component({	
	moduleId: module.id,
	selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
	exportAs: 'matButton, matAnchor',
	.
	.
	.
}

 

Titre
HttpClient

Texte

Introduit en version 4.3 et très bien accueilli par les développeurs, il remplace l'ancien HttpModule.

Titre
Ajout d'updateOn Blur / Submit dans Angular Form

Texte

Il est maintenant possible de déclencher la validation des champs et l'update des valeurs sur l'évènement blur ou sur le submit d'un formulaire plutôt que sur chaque évènement lié à un input. C'est très utile en cas de validation côté serveur ou si des calculs coûteux sont déclenchés par la validation ou l'update des champs, cela permet de les lancer moins souvent.

Titre
RxJS 5.5

Texte

Pour être très bref, cette version améliore le système d'import.

Au lieu de :

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

On peut maintenant :

import { map, filter } from 'rxjs/operators';

 

Titre
Nouveaux événements pour le Router

Texte

Les nouveaux évènements peuvent être utilisés pour contrôler l'affichage d'un spinner ou pour mesurer les performances d'un resolver.

Voici un exemple d’utilisation pour démarrer et arrêter un spinner :

class MyComponent {	
	constructor(public router: Router, spinner: Spinner) {
		 router.events.subscribe(e => {
		 	 if (e instanceof ChildActivationStart) {
		 	 	 spinner.start(e.route);
			} else if (e instanceof ChildActivationEnd) {
		 	 	 spinner.end(e.route);
			}
		});
	}
}

 

Titre
Pour aller plus loin

Texte

Vous pouvez retrouver plus de détails en anglais sur le blog d’Angular et aussi jeter un œil sur le changelog complet sur Github.

Auteur
By Vivien
Haut