L'auteur du document, dont nous publions la traduction, suggère de parler d'Angular 8. Ici, nous aborderons certains sujets particulièrement chauds soulevés lors des événements NgConf et Google I / O 2019. Par conséquent, si vous êtes intéressé par Angular, mais pour une raison quelconque, vous n'avez pas vu de rapports de de ces activités, nous pensons que vous serez curieux de savoir ce que vous pouvez attendre d'Angular 8.
Points clés
Je suis sûr que vous attendez maintenant Angular 8 avec impatience et ressentez les mêmes sentiments que ceux que j'ai ressentis après NgConf 2019. Le
rapport d' Igor Minar a abordé de nombreuses innovations attendues - des outils aux technologies comme le chargement différentiel et bien d'autres choses merveilleuses.
Voyons comment tout cela peut affecter vos projets. À savoir, nous examinerons de nouvelles opportunités et nous demanderons si leur apparition conduira à la reconnaissance de mécanismes existants obsolètes, ou au fait que le nouveau sera incompatible avec l'ancien.
De nouvelles fonctionnalités
▍ Charge différentielle
À l'aide de la technologie de chargement différentiel, Angular peut créer un ensemble distinct pour les polyfills pendant le processus de construction d'un projet. Cela dépend du fichier de la
browserlist des
browserlist . Voici à quoi cela ressemblera en termes généraux.
Ci-dessus est une nouvelle façon d'emballer des projets ( source )L'utilisation de cette fonction réduira la taille des lots.
Économies grâce au chargement différentiel ( source )Comment ça marche?
Angular collectera des fichiers polyfill supplémentaires et ils seront intégrés dans le code à l'aide d'attributs de
nomodule :
<body> <pp-root></pp-root> <script type="text/javascript" src="runtime.js"></script> <script type="text/javascript" src="es2015-polyfills.js" nomodule></script> <script type="text/javascript" src="polyfills.js"></script> <script type="text/javascript" src="styles.js"></script> <script type="text/javascript" src="vendor.js"></script> <script type="text/javascript" src="main.js"></script> </body>
L'attribut
nomodule , booléen, empêche le chargement et l'exécution du script dans les navigateurs prenant en charge les modules ES6. Ces navigateurs ignorent ces scripts. Les navigateurs plus anciens les téléchargent et les exécutent.
▍ Modèles SVG
Désormais, les fichiers SVG peuvent être utilisés comme modèles. Jusqu'à présent, le HTML incorporé ou externe pouvait être utilisé comme modèle.
@Component({ selector: "app-icon", templateUrl: "./icon.component.svg", styleUrls: ["./icon.component.css"] }) export class AppComponent {...}
Moteur de rendu expérimental I Ivy
Le moteur Ivy est encore à un stade expérimental. Après la sortie d'Angular 8, vous pouvez le tester en utilisant l'indicateur
--enable-ivy lors de la création d'une nouvelle application. Le code correspondant est indiqué ci-dessous. N'oubliez pas qu'Ivy n'est pas encore tout à fait prêt (il est toujours dans l'état d'aperçu opt-in), et, comme l'a dit Igor Minar à NgConf 2019, il est toujours recommandé d'utiliser le moteur de visualisation lors de la création de nouvelles applications.
Afin d'activer l'utilisation de Ivy dans un projet existant, vous devez définir le paramètre d'
enableIvy option angularCompilerOptions dans
angularCompilerOptions sur
true dans le
angularCompilerOptions :
"angularCompilerOptions": {"enableIvy": true}
Vous pouvez créer une nouvelle application dans laquelle Ivy sera utilisé:
$ ng new my-app --enable-ivy
Ivy offre les fonctionnalités utiles suivantes, dont les trois premières sont attendues dans Angular 9:
- Compilation plus rapide.
- Vérification de type améliorée pour les modèles.
- Réduire la taille des paquets. Maintenant , si vous ne l'avez pas encore vu, une démonstration d'une application de 4,3 Ko avec Google I / O 19.
- Compatibilité descendante.
- Et ma fonctionnalité préférée est le débogage des modèles. Je suis sûr que, comme moi, de nombreux développeurs en ont besoin.
â–ŤSupport Bazel
Bazel est un autre outil que Google a déplacé vers le marché open source. Igor Minar dit que Bazel est utilisé depuis longtemps pour les besoins internes de l'entreprise et qu'il est désormais accessible à tous. Pour en savoir plus sur ce générateur de projet, consultez la
documentation et lisez comment utiliser Bazel avec
Angular .
Peut-être vous demandez-vous maintenant si Bazel est prêt pour une utilisation pratique. Répondez brièvement à cette question - elle n'est pas encore prête. Maintenant, il est dans le statut de "prévisualisation opt-in". Permettez-moi de citer Alex Eagle, qui dirige l'équipe de développement d'outils angulaires chez Google: «Si vous êtes déjà entré dans les eaux de Bazel auparavant, vous ne pouvez pas vous empêcher de remarquer qu'il y avait beaucoup de requins ... Maintenant, nous avons déjà géré les requins, mais l'eau peut toujours être froid. "
Bazel est toujours en cours d'Ă©laboration, il devrait ĂŞtre inclus dans
@angular/cli dans la version 9.
Voici quelques fonctionnalités utiles que Bazel peut nous offrir:
- Accélérer le temps de construction du projet. La première version prend un certain temps, mais les versions parallèles sont beaucoup plus rapides. Angular utilise déjà Bazel, et maintenant les routines CI se terminent en 7,5 minutes, pas une heure, comme c'était le cas avant Bazel.
- Assemblage de projet incrémental. Il sera possible de collecter et de déployer non pas l'intégralité de l'application, mais uniquement ce qui y a changé.
- Possibilité de travailler avec des fichiers Bazel, qui, par défaut, sont masqués.
Vous pouvez ajouter la prise en charge Bazel Ă un projet existant comme suit:
ng add @angular/bazel
Vous pouvez créer une nouvelle application à l'aide de Bazel:
$ npm install -g @angular/bazel $ ng new my-app --collection=@angular/bazel
â–ŤAPI Builders
La nouvelle version d'Angular vous permet d'utiliser les constructeurs d'API, également appelés architectes. Angular utilise des constructeurs pour effectuer des opérations de base:
serve ,
build ,
test ,
lint et
e2e . Voici un exemple d'utilisation d'assembleurs du fichier
angular.json :
... "projects": { "app-name": { ... "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", ... }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", ... }, "test": { "builder": "@angular-devkit/build-angular:karma", ... }, "lint": { "builder": "@angular-devkit/build-angular:tslint", ... }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", ... } } } }
Vous pouvez maintenant créer vos propres collectionneurs. Je les vois comme similaires aux commandes gulp / grunt utilisées dans l'ancien temps.
En général, le collecteur est juste une fonction avec un ensemble de commandes qui est passé à la méthode
createBuilder() du package
@angular-devkit/architect :
import { createBuilder } from '@angular-devkit/architect'; function customBuild(options, context) { return new Promise((resolve, reject) => {
Vous pouvez jeter un œil aux constructeurs angulaires intégrés
ici .
Voici d' excellentes informations Ă leur sujet sur le blog Angular.
â–ŤModifications du chargement paresseux
La nouvelle version d'Angular aura également une nouvelle version du système de chargement de module paresseux, dont l'apparition conduit au fait que la syntaxe existante
loadChildren:string sera obsolète.
Auparavant, cela ressemblait Ă ceci:
loadChildren: './lazy/lazy.module#LazyModule';
Avec la sortie d'Angular 8 - comme ceci:
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
Si vous avez de nombreux modules lorsque vous travaillez avec lesquels le mĂ©canisme de chargement paresseux est utilisĂ© et que vous souhaitez automatiser leur traduction dans un nouveau mode de fonctionnement, jetez un Ĺ“il Ă
ce matériel.
â–ŤSupport API $ location AngularJS
L'équipe de développement Angular s'engage à soutenir ceux qui utilisent AngularJS et à les aider à passer à Angular. Par conséquent, la prise en charge du service
$location a été ajoutée au système, dans le package
angular/common/upgrade . Nous parlons des fonctionnalités suivantes:
- Obtenir le statut du service
$location . - Suivi des changements d'adresse.
- Obtenir les mĂŞmes informations sur les composants de l'adresse qui pourraient ĂŞtre obtenues dans AngularJS (
hostname , protocol , port , search ). - Test du service Ă l'aide de l'API MockPlatformLocation.
â–ŤTravailleurs Web
Angular 8 ajoute la prise en charge des travailleurs Web. Avec leur aide, vous pouvez organiser l'exécution en arrière-plan de code gourmand en ressources. Afin de créer un nouveau travailleur Web, vous pouvez utiliser la commande d'interface de ligne de commande angulaire suivante:
ng g webWorker <name>
â–ŤTravailleurs de service
Depuis récemment, la popularité des applications Web progressives a considérablement augmenté, de nombreuses améliorations ont été apportées aux travailleurs des services. En particulier, l'une de ces améliorations a été l'ajout du paramètre
SwRegistrationOptions . Une autre amélioration a été la prise en charge de plusieurs applications sur le même domaine.
En savoir plus sur les travailleurs de service dans
cette section de la documentation angulaire.
▍ Améliorations du formulaire
La méthode
markAllAsTouched a été
markAllAsTouched , ce qui vous permet de marquer tous les éléments d'un
FormGroup comme Ă©tant
touched . Cela est très utile dans les cas où vous devez exécuter la validation de tous les contrôles d'un
FormGroup . Avant cela, la mĂŞme chose se faisait comme ceci:
validateFormAndDisplayErrors(form: FormGroup) { Object.keys(form.controls).map((controlName) => { form.get(controlName).markAsTouched({onlySelf: true}); }); }
Dans le nouvel Angular, vous pouvez utiliser la méthode
clear pour
clear FormArray , qui en supprime tous les éléments. Auparavant, il était nécessaire d'utiliser la construction suivante, en supprimant le premier élément à chaque itération de la boucle:
while (formArray.length) { formArray.removeAt(0); }
Vous n’avez plus à faire cela. Il suffit maintenant d'appeler une seule méthode:
formArray.clear()
▍Configuration du moment de réception d'une réponse lors de l'utilisation des directives ViewChild et ContentChild
Cette nouvelle fonctionnalité implique l'utilisation de l'indicateur
static , qui vous permet de spécifier quand la demande est résolue, définie par la directive
ViewChild ou
ContentChild .
Vous avez peut-être rencontré les exemples suivants de comportement incohérent du système. Parfois, les résultats de la recherche sont disponibles dans la méthode de cycle de vie
ngOnInit , et parfois ils ne sont pas lĂ avant d'appeler
ngAfterContentInit ou
ngAfterViewInit . Voici comment utiliser l'indicateur
static :
Il convient de noter que ces fonctionnalités ne sont pas disponibles pour les directives
ViewChildren et
ContentChildren . Les requêtes de recherche d'élément correspondantes sont exécutées une fois la détection de modification effectuée.
Lorsque vous utilisez
static: true être prudent car l'utilisation de cet indicateur ne vous permettra pas d'obtenir des résultats à partir de modèles dynamiques (c'est-à -dire * ngIf). Une règle schématique a été ajoutée au système, vous permettant de traduire le code existant pour utiliser la nouvelle syntaxe. Cette syntaxe sera utilisée avec Ivy.
→ Des détails sur cette fonctionnalité sont disponibles
ici .
â–ŤSupport Typescript 3.4.x
Angular utilise désormais TypeScript 3.4 (la septième version d'Angular utilise TypeScript 3.2.x). Il n'y a pas tant de changements majeurs dans la nouvelle version de TS. Ils n'entraîneront probablement pas de conséquences désagréables.
→ Des détails sur les innovations de TS 3.4 peuvent être trouvés
ici .
▍ Amélioration des performances
Dans les conditions actuelles,
ServerRendererFactory2 crée une nouvelle instance de
DomElementSchemaRegistry pour chaque demande, ce qui est assez coûteux en termes de ressources. Le partage de l'instance globale de
DomElementSchemaRegistry sera désormais organisé.
▍ Déploiement d'applications angulaires sur l'hébergement Firebase
Si vous utilisez l'hébergement Firebase pour déployer des applications angulaires, vous aimerez certainement cette innovation. Le fait est que maintenant dans la CLI angulaire, il y a une commande spéciale pour effectuer cette opération:
ng run [PROJECT_NAME]:deploy
→
Ici, vous pouvez en savoir plus sur cette fonctionnalité.
API obsolètes
â–ŤUtilisation de tout type lors de l'utilisation de TesBed.get
La méthode
TesBed.get avait deux signatures. L'un est tapé, le second est le type de réception et de retour. Désormais, la signature de méthode, qui prévoit l'utilisation du type
any , est obsolète. Vous ne pouvez utiliser cette méthode qu'avec une indication d'un type spécifique. Cela, par exemple, affectera les cas de travail avec des jetons de chaîne (qui ne sont pas pris en charge) et avec certains autres jetons.
Auparavant utilisé de tels modèles:
TestBed.configureTestingModule({ providers: [{ provide: "stringToken", useValue: new Service() }], }); let service = TestBed.get("stringToken");
Maintenant, l'approche suivante est appliquée:
const SERVICE_TOKEN = new InjectionToken<Service>("SERVICE_TOKEN"); TestBed.configureTestingModule({ providers: [{provide: SERVICE_TOKEN, useValue: new Service()}], }); let service = TestBed.get(SERVICE_TOKEN);
â–ŤEnlever DOCUMENT du navigateur angulaire / de la plateforme
DOCUMENT supprimé du package
@angular/platform-browser . Si vous utilisez
DOCUMENT partir de ce package, vous devez commencer Ă l'importer depuis
@angular/common .
â–Ť DĂ©sinstaller le package angulaire / http
Le package
@angular/http était obsolète dans Angular 5, mais était toujours disponible car
@angular/platform-server dépendait. Maintenant, ce package est supprimé de la liste des packages.
Changements critiques
â–Ť Correction du code automatique
Peu de gens savent qu'Angular corrige automatiquement les erreurs lors de l'utilisation des éléments HTML
tr et
col .
Dans le cas de
tr corrections ont été apportées si l'élément correspondant n'était pas à l'intérieur de la
tbody ,
tfoot ou
thead . Les corrections consistaient à placer automatiquement un élément dans le
tbody .
Dans le cas de
col corrections ont été apportées au code dans lequel cet élément n'est pas à l'intérieur de la balise
colgroup .
Angular laisse désormais la correction de ces erreurs à la discrétion des développeurs. Ceci est fait afin d'éviter les conflits et les erreurs. En conséquence, ceux qui sont habitués à cette fonctionnalité devront prendre soin de l'exactitude du code eux-mêmes.
→ Des détails à ce sujet peuvent être trouvés
ici .
▍ Renommer le matériau angulaire
Le projet Matériau angulaire a été renommé Composants angulaires. Les noms des packages n'ont pas changé.
Résumé
Angular 8 sortira très prochainement. L'équipe de développement Angular fait un excellent travail. Les résultats de leurs efforts facilitent le travail et la vie de ceux qui utilisent Angular. En particulier, par exemple, avec chaque nouvelle version du framework, il devient de plus en plus facile de passer à la version précédente. Voici, par exemple, à quoi cela ressemble avec Air France.
Temps requis pour passer aux nouvelles versions d'Angular ( source )En conséquence, nous pouvons espérer que la transition d'Angular 7 à Angular 8 ne prend pas beaucoup de temps et ne nécessite pas d'efforts sérieux.
Vous trouverez ici des didacticiels pas Ă pas sur la mise Ă niveau vers de nouvelles versions d'Angular.
Il y a environ un mois, Igor Minar a
déclaré que tout indique que Angular 8.0.0 pourrait bien sortir fin mai.
Angular 8.0.0-rc.5 est sorti le
24 mai.
L'avenir d'Angular semble assez optimiste. Tout dépend de nous.
Chers lecteurs! Qu'attendez-vous d'Angular 8?
