Ce message a été initialement publié sur Mon site internet: https://dsebastien.net
Dans cet article, je vais passer en revue (presque) tout ce qui est remarquable dans cette toute nouvelle version. Je soulignerai également ce qui a changé autour d'Angular, tout comme je l'ai fait avec mes précédents articles sur 11 angulaire ainsi que 10 angulaire.
Si vous recherchez simplement la vue plongeante, consultez le annonce de sortie officielle. Ici, je vais creuser beaucoup plus profondément dans les notes de version.
Rejoignez la ligue Ivy…
L'équipe Angular a travaillé sur Rasoir Lierre (le nouveau pipeline de compilation et de rendu) depuis 2018. Il a finalement été publié avec Angular 8. Depuis Angular 9, Ivy est la valeur par défaut pour les nouveaux projets, et l'écosystème y migre lentement. Avec angulaire 12, l'ancien View Engine est désormais officiellement obsolète. Il sera supprimé dans une future version majeure. De plus, il ne sera pas possible de créer de nouvelles applications à l'aide de View Engine. Enfin, Ivy est désormais la valeur par défaut pour les nouveaux projets de bibliothèque.
À ce stade, les auteurs de bibliothèques peuvent toujours compter sur View Engine grâce à ngcc
(le compilateur de compatibilité d'Angular), mais il est vraiment temps pour eux d'évaluer s'ils peuvent migrer leurs bibliothèques vers Ivy ou non. Il y a quelques semaines, Minko Gechev a publié un article pour expliquer cela en détail. Consultez également les RFC.
Au cas où tu ne le saurais pas, ngcc
est le petit processus qui s'exécute après la création d'un projet Angular ou l'installation de dépendances. Lorsque vous voyez des messages comme Compiling ... : es2015 as esm2015
, c'est ngcc
faire son travail. Quoi ngcc
fait est de compiler des bibliothèques qui s'appuient sur View Engine afin qu'Ivy puisse les utiliser.
Comme moi, vous avez probablement remarqué que ngcc
prend beaucoup de temps à exécuter et a un impact très négatif sur l'expérience des développeurs. C'est pourquoi il est crucial pour l'écosystème Angular de migrer vers Ivy dès que possible. Deuxièmement, jusqu'à ce que la majorité de l'écosystème ait évolué, l'équipe Angular devra conserver View Engine, ce qui est problématique pour un certain nombre de raisons. Enfin, les bibliothèques qui s'appuient sur View Engine ne peuvent pas dépendre de celles d'Ivy.
Les auteurs de bibliothèques ne peuvent probablement pas migrer trop rapidement vers Ivy, mais ils devraient clairement pousser les utilisateurs réticents à effectuer une mise à niveau. Quoi qu'il en soit, la voie à suivre est de migrer toutes les choses vers Ivy dès que possible
Il y a un excellent article sur Ivy là-bas.
Au revoir rapporteur
En avril, l'équipe Angular a annoncé son intention de mettre fin au support de Rapporteur d'angle À la fin de 2022.
À partir d'Angular 12, Protractor ne sera pas inclus par défaut dans les nouveaux projets. Au lieu de cela, Angular CLI fournira des options pour utiliser d'autres solutions telles que Cyprès, WebdriverIOou TestCafé. Cela signifie que le ng e2e
La commande devrait continuer à être prise en charge à l'avenir.
Comme cela est expliqué dans l'annonce, en 2013 lors de la création de Protractor, pilote web n'était pas une référence, et les tests de bout en bout (e2e) étaient difficiles à écrire et un cauchemar à maintenir. Protractor a apporté une solution innovante en enveloppant sélénium-webdriver, et fourni un moyen de contrôler le flux d'exécution.
Bien sûr, beaucoup de choses ont évolué depuis. Nous avons maintenant le WebDriver
API async
ainsi que await
(même de haut niveau await
, ouah). De plus, l'écosystème a également évolué. Des solutions comme Cyprès, Dramaturge, Marionnettiste ont gagné beaucoup de popularité (bien méritée). Des outils comme Cypress, par exemple, offrent une bien meilleure expérience de développement que Protractor, tirent parti des normes modernes et prennent même en charge les tests entre navigateurs (entre autres fonctionnalités puissantes). Un autre avantage des outils de test e2e de facto actuels est qu'ils sont indépendants du framework, ce qui est très précieux.
Pour faire court, maintenir Protractor n'a pas beaucoup de sens pour l'équipe Angular. L'évolution du rapporteur maintenant exigerait trop d'efforts et induirait une tonne de changements de rupture. Vous pouvez trouver plus de détails dans la RFC, c'est une lecture intéressante.
Le calendrier est important pour les équipes/projets qui ont investi beaucoup de temps et d'énergie dans la rédaction de tests e2e avec Protractor. L'équipe Angular est toujours occupée à évaluer les commentaires recueillis via le RFC, nous en saurons probablement plus plus tard cette année.
De toute façon; essayez Cypress si vous ne l'avez pas déjà fait, vous ne serez pas déçu ! Au fait, je continue de recommander à tout le monde de commencer à utiliser Nrwl NX, une solution merveilleuse qui inclut la prise en charge d'Angular, React, Next.js, Cypress et bien plus encore
Fusion nulle
Angular 12 inclut la prise en charge de l'utilisation du opérateur de fusion nul dans les modèles angulaires. Et c'est génial ! Cet opérateur a été pris en charge dans TypeScript depuis la version 3.7.
Si vous n'avez pas entendu parler de cet opérateur, laissez-moi vous donner une explication rapide. L'idée est de pouvoir définir une valeur de repli au cas où quelque chose serait null
or undefined
. Voici un exemple:
If foo
is null
or undefined
, puis x
sera réglé sur true
(c'est-à-dire la valeur de repli), et nous pouvons la définir sur ce que nous voulons.
Sans ce génial ??
opérateur, nous devrions écrire ceci à la place :
let x = foo !== null && foo !== undefined ? foo : true;
Maintenant qu'Angular le prend également en charge, nous pouvons enfin écrire des expressions telles que :
{{ age ?? calculateAge() }}
Au lieu de l'alternative ancienne et plus verbeuse. SOIGNÉ!
Vous pouvez en savoir plus sur ce changement ici.
Vous pouvez trouver plus d'informations sur la fusion nulle dans le Manuel de TypeScript ainsi que sur mdn.
Prise en charge de TypeScript 4.2
Angular 12 introduit la prise en charge de Tapuscrit 4.2, ce qui signifie que nous pouvons maintenant utiliser un tonne de nouvelles fonctionnalités linguistiques merveilleuses. De plus, la prise en charge de TypeScript 4.0 et 4.1 a été abandonnée.
Voici un bref aperçu de ce que comprend TS 4.2 :
Préservation des alias de type intelligent: Les types attendus sont affichés par les éditeurs de code au lieu des types bruts comme cela se produisait auparavant. Vous pouvez en apprendre plus à ce sujet ici.
Éléments de début/repos médian dans les types de tuple: Nous pouvons maintenant inclure des éléments de repos n'importe où dans un tuple (avec quelques mises en garde). C'est plutôt cool pour ceux d'entre nous qui comptent sur les tuples de temps en temps. En savoir plus à ce sujet ici.
Comprendre la structure de votre projet: TS 4.2 comprend un nouveau drapeau appelé --explainFiles
, qui demande au TypeScript de générer des informations sur la raison pour laquelle un fichier a été inclus dans votre programme. Ceci est très utile pour le dépannage.
Améliorations pour les contrôles de fonction non appelés: TypeScript peut désormais détecter davantage de cas où les fonctions ne sont pas appelées. Par exemple lors de l'écriture foo
au lieu de foo()
. Plus de détails et d'exemples peuvent être trouvés ici.
Les variables déstructurées peuvent maintenant être explicitement marquées comme inutilisées: let [_first, second] = getValues();
, ce qui est génial ; plus d'erreurs quand noUnusedLocals
est autorisé!
Il y a beaucoup plus en fait, comme des contrôles plus stricts pour le in
opérateur, et quelques changements de rupture qui pourraient vous impacter. Assurez-vous donc de consulter le notes de version.
Prise en charge du Webpack 5
Angular 11 nous a apporté support expérimental pour Webpack 5. Avec Angular 12, le support Webpack 5 est maintenant prêt pour la production. w00t !
Si vous n'avez pas regardé Webpack 5, vous allez être étonné. Webpack 5 est sorti en octobre 2020, il est donc assez stable maintenant. Webpack est actuellement à Version 5.37 (sorti il y a quelques jours).
Voici une brève explication de ce qui a changé avec Webpack 5, et pourquoi j'en suis si content 🤩
Tout d'abord, comme vous le savez, Webpack est le key pièce du puzzle Angular CLI, et il joue un grand rôle pour la taille de l'ensemble, les performances de construction, etc.
Deuxièmement, Webpack 5 est une version majeure pour une raison. Il comprend un certain nombre de changements de rupture, ce qui explique pourquoi il a fallu un certain temps à Angular et à des milliards d'utilitaires/bibliothèques de l'écosystème pour se mettre à niveau.
Dans les notes de version, l'équipe Webpack a indiqué que Webpack 5 se concentre sur :
- Améliorer les performances de construction avec persistant la mise en cache
- Améliorer la mise en cache à long terme avec de meilleurs algorithmes et valeurs par défaut
- Amélioration de la taille des bundles avec un meilleur Tree Shaking et génération de code
- Améliorer la compatibilité avec la plateforme Web
- Nettoyage des structures internes
- Présentation des changements de rupture (haha) maintenant, leur permettant de rester sur la v5 aussi longtemps que possible
La caractéristique la plus intéressante de Webpack 5 est sa prise en charge de la fédération de modules, qui jette les bases nécessaires pour faciliter la création de micro frontaux. C'est un peu hors de portée de cet article, mais en un tournemain, la fédération de modules permet à différentes versions de se comporter comme un énorme graphe de modules connectés, et nous permet d'importer et d'utiliser des modules à partir de versions distantes. Vérifier la documentation officielle en savoir plus.
Parmi les changements majeurs, Webpack 5 a supprimé tout ce qui était auparavant obsolète (par exemple, NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
), aussi bien que IgnorePlugin
ainsi que BannerPlugin
.
De plus, les polyfills Node.js qui étaient précédemment injectés automatiquement ont été supprimés ; et c'est l'un des plus gros changements de cette version. Ces polyfills ont initialement permis à Webpack de nous laisser utiliser des modules conçus pour Node.js dans le navigateur. C'était cool, mais cela avait un inconvénient majeur : des paquets plus gros. De plus, ces polyfills étaient de moins en moins utiles, car il existait soit des alternatives de bibliothèques compatibles avec les navigateurs, soit des distributions spécifiques prenant en charge le navigateur. À partir de Webpack 5, puisque ces polyfills ne seront plus ajoutés automatiquement, nous pourrions tomber sur des surprises. Par exemple dans les cas où nous utilisons des modules conçus pour Node.js dans le navigateur sans nous rendre compte que cela fonctionnait auparavant grâce à Webpack. Vous pouvez en apprendre plus à ce sujet ici.
Webpack 5 a introduit une meilleure prise en charge de la mise en cache à long terme. En mode production, il intègre désormais par défaut de nouveaux algorithmes :
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
Comme la valeur l'indique, ces algorithmes attribuent des ID déterministes aux morceaux et aux modules, et des noms déterministes aux exportations.
Webpack 5 est capable d'effectuer le secouage d'arbres imbriqués, en suivant l'accès aux propriétés imbriquées des exportations (bienvenue dans la matrice), ce qui devrait encore améliorer le secouage d'arbres. Aussi, il peut désormais analyser les dépendances entre les exportations et les importations d'un module. Il y a aussi des améliorations à Arbre CommonJS secouant. Et il y a une tonne plus d'optimisations.
Webpack 5 inclut également un certain nombre de modifications pour améliorer l'expérience du développeur. Par exemple, il y a un nouvel algorithme nommé chunk id qui est activé par défaut en mode développement. Ce nouvel algorithme donne des noms lisibles par l'homme aux morceaux. Le target
la propriété a également été largement amélioré.
Pour être honnête, je n'ai pas assez d'espace ici pour couvrir tout ce qui est nouveau avec Webpack 5, là's juste manière trop beaucoup. Alors je m'arrête ici
Si vous n'utilisez Webpack qu'indirectement via la CLI angulaire, la plupart de ces éléments devraient être «transparents» pour vous. Mais si vous utilisez un création de pack Web personnalisé dans votre projet, alors vous devriez probablement jeter un œil à la guide de migration.
Enfin, si vous êtes curieux de savoir ce qui va suivre avec Webpack, consultez le feuille de route pour 2021 Et bien sur le dernières notes de version.
La prise en charge d'IE11 est obsolète
Aussi triste que cela puisse paraître (de qui je plaisante ? 😂), Angular 12 désapprouve la prise en charge d'IE11. Internet Explorer est mort pour la plupart d'entre nous, mais malheureusement, de nombreuses organisations l'utilisent encore en production. La prise en charge d'IE 11 sera donc supprimée par Angular 13, ce qui signifie que ces organisations doivent vraiment commencer à s'éloigner d'IE (ce qui est une bonne chose de toute façon). Plus d'excuses!
Une fois la prise en charge d'IE disparue, Angular sera plus petit, plus rapide et donc meilleur pour nous tous. De plus, une fois que le fardeau du maintien de la compatibilité descendante avec les navigateurs hérités aura disparu (IE11 est le dernier de ceux-ci !), Angular pourra alors tirer parti des API modernes (par exemple, Variables CSS, Observateur d'intersection, Grille CSS, Proxies, Animations Webet PLUS).
J'ai vraiment hâte que le support d'IE disparaisse !
Strict par défaut
OUI OUI OUI . A partir d'Angular 12, le mode strict d'Angular est activé par défaut dans la CLI. Et c'est génial.
Comme vous le savez, je suis un grand fan du mode strict de TypeScript, mais aussi du mode strict d'Angular. Si vous voulez en savoir plus, alors consultez l'article que j'ai écrit l'année dernière et celui de Minko Gechev article expliquant le changement.
Version de production par défaut
Jusqu'à présent, l'exécution du ng build
commande a créé une version de développement. À partir d'Angular 12, ng build
sera désormais par défaut une version de production.
Espérons que cela aidera certaines équipes à éviter de commettre l'erreur de créer et de déployer des versions de développement dans des environnements de production. Cependant, je crains que les équipes qui commettent cette erreur aient encore d'autres problèmes à régler
Prise en charge de Sass pour les styles en ligne
Angular prend en charge Sass depuis très longtemps mais, jusqu'à présent, nous ne pouvions utiliser Sass que dans des feuilles de style externes. Avec Angular 12, il est désormais possible d'utiliser Sass avec des styles de composants en ligne (c'est-à-dire dans le styles
propriété).
Cela doit être activé en définissant le nouveau inlineStyleLanguage
propriété à true
in angular.json
.
Prise en charge du vent arrière
Tailwind est maintenant officiellement pris en charge par Angular. En fait, la prise en charge a été introduite dans Angular CLI dans la version 11.2.
Le vent arrière est occupé à conquérir le monde, surtout maintenant qu'il a un compilateur JIT rad, et c'est merveilleux d'avoir une prise en charge intégrée dans Angular.
Auparavant, l'ajout de Tailwind à un projet angulaire était requis personnalisation de la version Webpack. Plus maintenant! Maintenant, ajouter Tailwind est aussi simple que d'installer le package, de créer le tailwind.config.js
déposer à l'aide npx tailwindcss init
, et en veillant à activer Mode JIT de Tailwind.
Améliorations HTTP
Angular 12 introduit un certain nombre d'améliorations autour de sa prise en charge HTTP.
Métadonnées pour les requêtes et les intercepteurs
La première, la HttpClient
peut désormais être utilisé pour stocker et récupérer des métadonnées personnalisées pour les demandes. Ceci est particulièrement utile pour les intercepteurs HTTP. Cette capacité peut être utilisée via le nouveau HttpContext
.
Auparavant, il était compliqué de fournir un contexte aux intercepteurs, mais maintenant ce sera beaucoup plus simple. Maintenant, les différentes méthodes HTTP fournies par HttpClient
inclure un nouveau context: HttpContext
option, que nous pouvons utiliser pour passer dans une carte.
Netanel basal a écrit un article à ce sujet, alors regarde si tu veux en savoir plus.
appendAll sur HttpParams
Les HttpParams
la classe a maintenant un nouveau appendAll
méthode, qui peut être utilisée pour ajouter facilement un ensemble de paramètres à la fois :
appendAll(params: {[param: string]: string|string[]}): HttpParams
Les paramètres peuvent maintenant être transmis sous forme de nombres et de booléens
Auparavant, les nombres et les booléens ne pouvaient pas être directement utilisés comme paramètres HTTP. Nous avons dû les transformer en ficelles. Plus maintenant!
HttpStatusCode
Angular a introduit sa propre liste de noms lisibles par l'homme pour les codes d'état HTTP, sous la forme d'une énumération const.
Auparavant, nous devions introduire notre propre solution si nous voulions avoir des noms lisibles par l'homme. Grâce à cette nouvelle fonctionnalité, nous pouvons désormais utiliser à la place HttpStatusCode
.
Par exemple :
if (response.status === HttpStatusCode.Ok) { ...
}
Pour ceux qui utilisent TypeScript à la fois sur le back-end et le front-end, ce n'est pas très utile (car nous avons probablement déjà tous notre propre abstraction), mais si votre projet n'utilise que TypeScript/Angular sur le front-end, alors c'est une belle amélioration.
XhrFactory
Les XhrFactory
la classe a été déplacée vers un autre package. Il est maintenant exposé par angular/common
au lieu de angular/common/http
.
Notez qu'une migration a été incluse dans la mise à niveau, vous ne remarquerez donc même pas si vous exécutez ng update
Changements de routeur
Le routeur Angular a un peu changé dans Angular 12.
La première, la routerLinkActiveOptions
directive a été renforcée. Maintenant, il est possible de spécifier si nous avons besoin d'une correspondance exacte ou non pour différentes parties de l'URL afin d'ajouter une classe CSS à un lien.
Auparavant, nous ne pouvions exiger qu'une correspondance exacte (ou non) pour l'intégralité de l'URL :
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
Désormais, nous pouvons à la place fournir des règles de correspondance affinées pour les chemins, les paramètres de requête, les paramètres de matrice et les fragments.
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
Les valeurs prises en charge sont exact
, ignored
ainsi que subset
, qui peut être utilisé pour queryParams
ainsi que matrixParams
. Pour les chemins, vous pouvez soit passer en exact
or subset
et exact
or ignored
pour le fragment
.
Notez que le isActive
La méthode du routeur accepte également ces nouvelles options.
le fragment est nullable
Jusqu'à maintenant, ActivatedRouteSnapshot.fragment
n'était pas nul. Cela a changé avec Angular 12. Ne vous inquiétez pas trop cependant; ng update
vous a couvert
Formulaires
Plus de contrôle sur les événements émis
Les emitEvent
option a été ajoutée à diverses méthodes de FormGroup
ainsi que FormArray
. Grâce à ce changement, il sera désormais possible de contrôler si des événements doivent être émis ou non dans plus de cas.
Par exemple, auparavant, lorsqu'un contrôle était supprimé à l'aide de la removeControl
méthode de FormGroup
, alors un événement était toujours émis. Avec ce changement, nous serons désormais en mesure d'éviter de tels problèmes.
Les emitEvent
option a été ajoutée aux méthodes suivantes de FormGroup
:
addControl
removeControl
setControl
Et aux méthodes suivantes de FormArray
:
push
insert
removeAt
setControl
clear
prise en charge des validateurs min et max pour les formulaires basés sur des modèles
Les min
ainsi que max
les validateurs d'Angular peuvent désormais être utilisés avec des formulaires basés sur des modèles :
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
Notez qu'il s'agit d'un changement décisif, car ceux-ci seraient auparavant ignorés.
i18n
Le système i18n d'Angular a changé avec cette version.
Comme indiqué dans le billet de blog d'annonce, un certain nombre d'anciens formats d'identifiant de message sont actuellement utilisés. Ceux-ci sont fragiles et des problèmes peuvent apparaître à cause des espaces, des modèles de formatage et des expressions ICU.
Angular 12 introduit un nouveau format d'identifiant de message canonique (c'est-à-dire un format pour les gouverner tous). Ce format est plus résistant et plus intuitif.
Ce format réduira l'invalidation de traduction inutile et le coût de retraduction associé dans les applications où les traductions ne correspondent pas en raison de modifications d'espaces, par exemple.
Depuis la v11, les nouveaux projets sont automatiquement configurés pour utiliser les nouveaux identifiants de message, et des outils sont désormais en place pour migrer les projets existants avec les traductions existantes. Si vous êtes concerné, vous pouvez utiliser le localize-migrate
outil pour migrer vos identifiants de message :
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
Vous pouvez trouver plus d'informations ici.
Amélioration des performances
Avec cette version, il y a un certain nombre d'améliorations de performances. Le plus évident vient avec la mise à niveau vers Webpack 5, mais il y a plus :
Un certain nombre de méthodes inutilisées ont été supprimées de DomAdapter
. C'est cool parce que ses méthodes ne sont pas modifiables par arbre et ont été incluses dans toutes les applications angulaires, comme expliqué dans le RP correspondant.
Angular génère désormais moins de code pour un accès sécurisé à la propriété ; par exemple pour les expressions de modèle comme a?.b
et la fusion nulle nouvellement prise en charge : a ?? b
.
Le compilateur angulaire prend désormais en charge la compilation incrémentielle même en présence de fichiers source redirigés. Auparavant, le travail de la compilation précédente ne pouvait pas être réutilisé lorsque TypeScript dédupliqué les fichiers source. Vous pouvez en savoir plus à ce sujet ici.
Le compilateur angulaire met désormais en cache le chemin du système de fichiers des fichiers sources. Auparavant, il appelait à plusieurs reprises fs.resolve()
, ce qui prend du temps.
Les getDirectives
la fonction a été améliorée. Parallèlement à ce changement, le ng
l'espace de noms a également été étendu pour inclure un nouveau getDirectiveMetadata
utilitaire.
Et il y a un peu plus.
ng améliorations de l'API
Les ng
API de débogage que nous pouvons utiliser à partir des outils de développement du navigateur a été amélioré avec Angular 12.
Il y a une nouvelle fonction appelée getDirectiveMetadata
, qui peut être utilisé pour récupérer des informations sur les composants et les directives. Je ne pense pas que nous en aurons souvent besoin, mais les futures améliorations des outils de développement en dépendront probablement. Vous pouvez en savoir plus ici.
Une nouvelle fonction de profileur appelée esetProfiler
a également été implémenté, et il est également disponible en mode production. Cette nouvelle fonction peut être appelée dans un certain nombre de scénarios. Par exemple, il peut être utilisé pour suivre les durées de création de modèles, les mises à jour de modèles, le traitement des hooks de cycle de vie, etc. Encore une fois, cette API sera exploitée par les prochains outils de développement, nous donnant beaucoup plus d'informations sur les performances de nos applications. Durée.
C'est encore expérimental à ce stade, mais je suppose que nous en apprendrons plus à ce sujet plus tard. Je suis curieux de voir si/quand des outils comme Sentry intégreront un support pour collecter ce genre d'informations afin de nous fournir des tableaux de bord de performance utiles.
Quelques jours après la sortie d'Angular 12, l'équipe d'Angular a annoncé la disponibilité des tout nouveaux outils de développement angulaires pour Google Chrome. Vous pouvez télécharger ces ici.
En utilisant cette toute nouvelle extension de navigateur, vous pouvez facilement inspecter vos applications Angular pendant le développement. Ça supporte:
- Visualiser la structure de l'application (c'est-à-dire inspecter l'arborescence des composants)
- Explorer et éditer des composants
- Profilage des performances
À l'aide du profileur intégré, nous pouvons enregistrer les événements de détection de changement et les prévisualiser au fur et à mesure qu'ils se produisent. Pour chaque cycle de détection de changement, nous pouvons voir combien de temps cela a pris, quels composants ont pris le plus de temps, si ce cycle a causé des pertes de trames.
Angular disposait auparavant d'outils de développement semi-officiels via le Augure projet (qui sont la base des nouveaux outils !), mais ceux-ci n'étaient pas compatibles avec Ivy. C'est donc une excellente nouvelle pour la communauté Angular !
Il ya une tonne de plus changements mineurs dans cette version. Voici un aperçu rapide.
APP_INITIALIZER prend désormais en charge les observables
Jusqu'à présent, il n'était pas possible d'utiliser des Observables avec APP_INITIALIZER
. À partir d'Angular 12, nous pouvons maintenant le faire, ce qui permettra un code plus propre !
Au cas où vous ne connaissiez pas encore cette fonctionnalité d'Angular, APP_INITIALIZER
is un jeton que nous pouvons utiliser pour définir les fonctions qui doivent s'exécuter lors de l'initialisation de l'application. Si cette fonction est asynchrone, renvoyer un Promise
ou d’une Observable
(nouveau :p), puis Angular attend qu'il se termine avant de lancer l'application.
Ce changement est plus que bienvenu, car cela signifie que nous pouvons écrire encore plus de code en utilisant RxJS, au lieu d'avoir à « se replier » sur le Promise
API.
Vous pouvez en savoir plus à ce sujet ici.
Contrôle d'exécution sur les animations
Auparavant, le seul moyen de désactiver les animations était de fournir le NoopAnimationsModule
. À partir d'Angular 12, il est désormais possible de désactiver les animations basées sur les informations d'exécution, en utilisant BrowserAnimationModule.withConfig
méthode, et en lui passant le disableAnimations
propriété booléenne.
Nouvelle méthode historyGo sur le service de localisation
Les LocationService
d'Angular comprend désormais un historyGo
méthode, qui peut être utilisée pour naviguer vers une page spécifique de l'historique de la session, identifiée par sa position relative par rapport à la page en cours. Cette méthode correspond au natif window.history.go
méthode. Découvrez MDN pour quelques exemples.
Améliorations des services linguistiques
Le service de langue, qui fournit aux IDE toutes les informations utiles sur le code angulaire, s'est également amélioré avec cette version.
Avec Angular 12, le service de langue est activé par défaut (auparavant, nous devions nous inscrire).
À partir d'Angular 12, il détectera également si vérification stricte du type de modèle n'est pas activé et vous conseillera d'activer ces.
Le service linguistique comprend désormais également des capacités de traçage des performances, qui peuvent être utilisées pour tracer les performances. Cela peut être activé dans VSCode, comme expliqué ici (c'est un niveau assez bas cependant).
Si vous ne connaissez pas encore le service linguistique, consultez les documents officiels, ou le joli billet de blog écrit par Escouade Ninja, ou ca vidéo d'intro.
Désactiver les règles Lint directement à partir des modèles HTML
Le compilateur de modèle Angular garde désormais une trace des commentaires HTML.
Auparavant, il n'était pas possible de désactiver les règles de linter des modèles HTML car le compilateur de modèles angulaires ignorait les commentaires. La solution de contournement consistait à désactiver ces règles pour l'ensemble du modèle à partir du contrôleur du composant. Grâce à ce changement, il sera désormais possible de le faire plus précisément à partir du template :
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
Ouais pour un code plus propre !
Le DatePipe prend désormais en charge le jour de la semaine Stand Alone standard ICU
Auparavant, il n'était pas possible pour formater une date en jour de la semaine autonome à l'aide de DatePipe.
Grâce à ce changement, le formatage de date finlandais est désormais pris en charge, et je suis sûr que c'est une excellente nouvelle pour une fraction de la communauté Angular 😉
Prise en charge de forwardRef dans les champs fournis dans les décorateurs injectables
Il est désormais possible d'utiliser forwardRef
au sein du providedIn
domaine de @Injectable
décorateur.
Nouveau hook transformResource sur l'interface ResourceHost
A transformResource
méthode a été ajoutée à la ResourceHost
interface. Grâce à cela, il est désormais possible pour les outils de faire des choses comme introduire la prise en charge du préprocesseur pour les styles en ligne. C'est ce qui permet la nouvelle prise en charge de SASS avec des styles en ligne.
Vous pouvez en apprendre plus à ce sujet ici ainsi que ici.
Possibilité de créer des implémentations de sortie de routeur personnalisées
Jusqu'à présent, la création de sorties de routeur personnalisées était possible, mais nécessitait de franchir quelques étapes (c'est-à-dire enregistrer des sorties personnalisées avec ChildrenOutletContexts
).
Angular 12 fournit un prise en charge plus propre pour les sorties de routeur personnalisées.
Corrections de bugs
Comme d'habitude, il y a des millions de corrections de bogues incluses dans cette version.
Voici une copie des notes de version :
- animations : assurer un ordre cohérent des espaces de noms de transition (#19854) (01cc995)
- animations : mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (e918250)
- animations : nettoyer les éléments DOM lorsque la vue racine est supprimée (#41059) (c49b280)
- animations : autoriser les animations sur les éléments du DOM fantôme (#40134) (papa42c8), se ferme #25672
- animations : nettoyer les éléments DOM lorsque la vue racine est supprimée (#41001) (a31da48)
- bazel : mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (8503246)
- bazel : mettre à jour les outils de construction pour les dernières modifications de rules_nodejs (#40710) (696f7bc)
- bazel : mettre à jour le test d'intégration à utiliser règles_nodejs@3.1.0 (#40710) (34of89a)
- bazel : mise à jour des castings de type pour l'utilisation de JSON.parse (#40710) (2c90391)
- Banc de Presse: mise à jour des castings de type pour l'utilisation de JSON.parse (#40710) (e721a5d)
- commun: ajouter le bon ContentType pour les valeurs booléennes avec le corps de la requête HttpClient (#38924) (#41885) (922a602)
- commun: mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (f2b6fd8)
- commun: scroller viewport ne trouvant pas d'éléments à l'intérieur du shadow DOM (#41644) (c0f5ba3), se ferme #41470
- commun: réexporter temporairement et déprécier
XhrFactory
(#41393) (xnumxdfaxnumx) - commun: Écouteurs de changement d'emplacement de nettoyage lorsque la vue racine est supprimée (#40867) (38524c4), se ferme #31546
- commun: autoriser un nombre ou un booléen comme paramètres http (#40663) (91cdc11), se ferme #23856
- commun: éviter de muter l'objet de contexte dans NgTemplateOutlet (#40360) (d3705b3), se ferme #24515
- compilateur: préserver les règles @page dans les styles encapsulés (#41915) (3e365ba), se ferme #26269
- compilateur: retirer les sélecteurs à portée de
@font-face
des règles (#41815) (2a11cda), se ferme #41751 - compilateur: mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (bae8126)
- compilateur: modèles inline non littéraux mal traités lors de la compilation partielle (#41583) (ab257b3)
- compilateur: ne pas générer d'instructions de mise à jour pour ng-template dans des espaces de noms alternatifs (#41669) (2bcbbda), se ferme #41308
- compilateur: évitez d'analyser EmptyExpr avec une étendue vers l'arrière (#41581) (e1a2930)
- compilateur: gérer les propriétés personnalisées CSS sensibles à la casse (#41380) (e112e32), se ferme #41364
- compilateur: inclure les composants utilisés lors de la compilation JIT de la déclaration partielle des composants (#41353) (ff9470b), se ferme #41104 #41318
- compilateur: prendre en charge plusieurs
:host-context()
sélecteurs (#40494) (07b7af3), se ferme #19199 - compilateur: mise à jour des castings de type pour l'utilisation de JSON.parse (#40710) (f728490)
- compilateur-cli : utilisez " pour l'URL de la carte source des modèles indirects (#41973) (7a4d980), se ferme #40854
- compilateur-cli : exposer l'éditeur de liens en tant que plugin Babel (#41918) (8fdac8f)
- compilateur-cli : privilégier les exports non aliasés dans les émetteurs de référence (#41866) (75bb931), se ferme #41443 #41277
- compilateur-cli : autoriser l'éditeur de liens à traiter les booléens minifiés (#41747) (1fb6724), se ferme #41655
- compilateur-cli : correspondance des déclarations partielles indexées par chaîne (#41747) (f885750), se ferme #41655
- compilateur-cli : mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (5b463f4)
- compilateur-cli : types littéraux de saisie semi-automatique dans les modèles. (#41456) (#41645) (8b2b5ef)
- compilateur-cli : ne faites pas d'erreur avec le prétraitement si le composant n'a pas de styles en ligne (#41602) (a5fe8b9)
- compilateur-cli : s'assurer que le compilateur suit
ts.Program
s correctement (#41291) (désacc74) - compilateur-cli : empêcher d'éliminer les importations par défaut dans les recompilations incrémentielles (#41557) (7f16515), se ferme #41377
- compilateur-cli : résoudre
rootDirs
à l'absolu (#41359) (3e0fda9), se ferme #36290 - compilateur-cli : ajouter
useInlining
option pour taper check config (#41043) (09aefd2), se ferme #40963 - compilateur-cli :
readConfiguration
les options existantes doivent remplacer les options dans tsconfig (#40694) (b7c4d07) - compilateur-cli : étendre
angularCompilerOptions
dans tsconfig à partir du nœud (#40694) (5eb1954), se ferme #36715 - compilateur-cli : mettre à jour les tests d'intégration ngcc pour les derniers changements dans rules_nodejs (#40710) (d7f5755)
- compilateur-cli : mise à jour des castings de type pour l'utilisation de JSON.parse (#40710) (b75d7cb)
- coeur: ne pas conserver les composants et modules compilés dynamiquement (#42003) (1449c5c), se ferme #19997
- coeur: invoquer le profileur autour des hooks de cycle de vie ngOnDestroy (#41969) (e9ddc57)
- coeur: AsyncPipe désormais compatible avec RxJS 7 (#41590) (9759bca)
- coeur: gérer plusieurs attributs i18n avec des liaisons d'expression (#41882) (73c6c64), se ferme #41869
- coeur: mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (f9c1f08)
- coeur: détecter les constructeurs synthétisés qui ont été abaissés à l'aide de TS 4.2 (#41305) (274dc15), se ferme #41298
- coeur: Interrupteur
emitDistinctChangesOnlyDefaultValue
à vrai (#41121) (7096246) - coeur: supprimer la constante EMPTY_OBJ dupliquée (#41066) (bf158e7)
- coeur: supprimer la constante EMPTY_ARRAY dupliquée (#40991) (e12d9de)
- coeur: permettre la mise à jour du contexte EmbeddedViewRef (#40360) (a3e1719), se ferme #24515
- coeur: faire que DefaultIterableDiffer conserve l'ordre des doublons (#23941) (a826926), se ferme #23815
- coeur: Les options de fusion NgZone devraient déclencher correctement onStable (#40540) (22f9e45)
- éléments: mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (4f5d094)
- éléments: mise à jour des castings de type pour l'utilisation de JSON.parse (#40710) (efd4149)
- formes: mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (dc975ba)
- http: terminer la demande à l'expiration du délai (#39807) (61a0b6d), se ferme #26453
- http: émettre une erreur sur l'événement d'abandon XMLHttpRequest (#40767) (3897265), se ferme #22324
- service-langue : mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (9b6198c)
- service-langue : utiliser des versions de script pour les compilations incrémentielles (#41475) (78236bf)
- service-langue : Ne fournissez que des complétions de propriétés angulaires dans les modèles (#41278) (0226a11)
- service-langue : Ajouter une option de plugin pour forcer strictTemplates (#41062) (e9e7c33)
- service-langue : utiliser un point d'entrée unique pour Ivy et View Engine (#40967) (e986a97)
- localiser: relâchez l'erreur à l'avertissement pour la cible manquante (#41944) (35ceed2), se ferme #21690
- localiser: mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (658ed1f)
- localiser: mise à jour des castings de type pour l'utilisation de JSON.parse (#40710) (4b469c9)
- ngcc : détecter les constructeurs synthétisés qui ont été abaissés à l'aide de TS 4.2 (#41305) (8d3da56), se ferme #41298
- navigateur-plateforme : empêcher la fuite de mémoire des nœuds de style si l'encapsulation shadow DOM est utilisée (#42005) (d555555), se ferme #36655
- navigateur-plateforme : mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (ea05cfd)
- navigateur-plateforme : configurer
XhrFactory
à utiliserBrowserXhr
(#41313) (e0028e5), se ferme #41311 - navigateur-plateforme : mise à jour des castings de type pour l'utilisation de JSON.parse (#40710) (7ecfd2d)
- plateforme-navigateur-dynamique : mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (bc45029)
- serveur-plateforme : mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (4b9d4fa)
- routeur: mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (0067ème jour)
- routeur: Récupérer la route stockée uniquement lorsque la stratégie de réutilisation indique qu'elle doit se rattacher (#30263) (a4ff071), se ferme #23162
- routeur: fusionner récursivement les correspondances de chemin vides (#41584) (1179dc8), se ferme #41481
- routeur: fragment peut être null (#37336) (b555160), se ferme #23894 #34197
- routeur: mise à jour des castings de type pour l'utilisation de JSON.parse (#40710) (350 donné)
- agent de service : mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (6b823d7)
- agent de service : mise à jour des castings de type pour l'utilisation de JSON.parse (#40710) (4f7ff96)
- améliorer: préserver $interval.flush lorsque ngMocks est utilisé (#30229) (87dc851)
- améliorer: mettre à jour la plage de versions de nœuds prise en charge pour n'inclure que les versions LTS (#41822) (10c4523)
Au fait, as-tu remarqué que AsyncPipe
a été patché par Ben Lesh pour être compatible avec RxJS 6 et 7 ? À quel point cela est cool?
Briser les changements
Comme d'habitude, il y a un certain nombre de changements de rupture avec cette version.
As les notes de publication officielles sont assez clairs, je les copie/colle ici :
- Les bundles UMD minifiés ne sont plus inclus dans les packages NPM distribués.
- animations: les éléments DOM sont désormais correctement supprimés lorsque la vue racine est supprimée. Si vous utilisez SSR et utilisez le code HTML de l'application pour le rendu, vous devrez vous assurer d'enregistrer le code HTML dans une variable avant de détruire l'application. Il est également possible que les tests s'appuient accidentellement sur l'ancien comportement en essayant de trouver un élément qui n'a pas été supprimé lors d'un test précédent. Si tel est le cas, les tests défaillants doivent être mis à jour pour s'assurer qu'ils disposent d'un code de configuration approprié qui initialise les éléments sur lesquels ils s'appuient
- commun: Méthodes de la
PlatformLocation
classe, à savoironPopState
ainsi queonHashChange
, utilisé pour retournervoid
. Maintenant, ces méthodes renvoient des fonctions qui peuvent être appelées pour supprimer les gestionnaires d'événements - commun : Les méthodes de
HttpParams
la classe accepte maintenantstring | number | boolean
au lieu destring
pour la valeur d'un paramètre. Si vous avez étendu cette classe dans votre application, vous devrez mettre à jour les signatures de vos méthodes pour refléter ces changements - compilateur-cli: les bibliothèques liées ne génèrent plus d'identifiants de message i18n hérités. Toute application en aval qui fournit des traductions pour ces messages devra migrer ses identifiants de message à l'aide du
localize-migrate
outil de ligne de commande - core: Angular ne prend plus en charge le nœud v10, donc si vous l'utilisez toujours pour votre environnement de développement, il est vraiment temps de mettre à niveau !
- core: Auparavant le
ng.getDirectives
La fonction a renvoyé une erreur au cas où un nœud DOM donné n'aurait pas de contexte angulaire associé (par exemple, si une fonction était appelée pour un élément DOM en dehors d'une application angulaire). Ce comportement était incompatible avec d'autres utilitaires de débogage sousng
namespace, qui a géré cette situation sans lever d'exception. Appelant maintenant leng.getDirectives
fonction pour de tels nœuds DOM entraînerait le retour d'un tableau vide à partir de ce noyau de fonction :emitDistinctChangesOnlyDefaultValue
qui modifie le comportement par défaut et peut entraîner l'échec de certaines applications qui reposent sur un comportement incorrect
emitDistinctChangesOnly
flag a également été déprécié et sera supprimé dans une future version majeure
L'implémentation précédente déclencherait des changements QueryList.changes.subscribe
chaque fois que le QueryList
a été recalculé. Cela a entraîné un nombre artificiellement élevé de notifications de modification, car il est possible que le recalcul QueryList
résultats dans la même liste. Quand le QueryList
est recalculé est un détail d'implémentation, et ce ne devrait pas être la chose qui détermine la fréquence à laquelle l'événement de changement doit se déclencher.
Malheureusement, la correction pure et simple du comportement a causé l'échec de trop d'applications existantes. Pour cette raison, Angular considère ce correctif comme un correctif de rupture et a introduit un indicateur dans @ContentChildren
ainsi que @ViewChildren
, qui contrôle le comportement.
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
Pour une compatibilité descendante avant la v12emitDistinctChangesOnlyDefaultValue
a été mis à false
. Ce changement
change la valeur par défaut en true
.
- coeur: Le type de
APP_INITIALIZER
token a été modifié pour refléter plus précisément les types de valeurs de retour gérées par Angular. Auparavant, chaque rappel d'initialisation était tapé pour retournerany
, c'est maintenantPromise<unknown> | Observable<unknown> | void
. Dans le cas peu probable où votre application utiliserait leInjector.get
orTestBed.inject
API pour injecter leAPP_INITIALIZER
jeton, vous devrez peut-être mettre à jour le code pour tenir compte du type le plus strict.
De plus, TypeScript peut signaler l'erreur TS2742 si le APP_INITIALIZER
jeton est utilisé dans une expression dont le type déduit doit être émis dans un fichier .d.ts. Pour contourner ce problème, une annotation de type explicite est nécessaire, qui serait généralement Provider
or Provider[]
.
-
coeur: Minimum pris en charge
zone.js
la version est0.11.4
. Cela signifie donc que si vous utilisez une ancienne version, il est également temps de mettre à niveau zone.js dans votre projet ! -
formes: Les
emitEvent
l'option a été ajoutée à la suivanteFormArray
ainsi queFormGroup
méthodes: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
FormArray.insert
-
TableauFormulaire.removeAt
-
TableauFormulaire.setControl
-
FormArray.clear
Si votre application comporte des classes personnalisées qui s'étendent FormArray
or FormGroup
classes et remplacer le
méthodes mentionnées ci-dessus, vous devrez peut-être mettre à jour votre implémentation pour prendre en compte les nouvelles options
compte et assurez-vous que les remplacements sont compatibles du point de vue des types.
- formes: Précédemment
min
ainsi quemax
attributs définis sur le<input type="number">
ont été ignorés par le module Forms. Maintenant, la présence de ces attributs serait
déclencher la logique de validation min/max (en casformControl
,formControlName
orngModel
des directives sont également présentes sur une entrée donnée) et
le statut de contrôle de formulaire correspondant refléterait cela. - navigateur-plateforme :
XhrFactory
a été déplacé de@angular/common/http
à@angular/common
.
Avant
import { XhrFactory } from '@angular/common/http';
Après
import { XhrFactory } from '@angular/common';
- routeur: Des vérifications nulles strictes rapporteront que le fragment est potentiellement nul.
Chemin de migration : ajoutez une vérification nulle. - routeur: Le type de
RouterLinkActive.routerLinkActiveOptions
l'entrée était
étendu pour permettre un contrôle plus précis. Code lu précédemment
cette propriété devra peut-être être mise à jour pour prendre en compte le nouveau type.
Feuille de route mise à jour
Selon l'Angular actuel feuille de route, l'équipe est maintenant occupée avec les améliorations suivantes :
- Améliorer l'expérience des développeurs lors du débogage et du profilage. Cela devrait nous aider à comprendre la structure des composants (j'imagine comme React Dev Tools permet React), et la détection des changements
- Amélioration des temps de test et du débogage avec le démontage automatique : cela devrait améliorer l'isolation entre les tests et les temps de test. Le Lit d'essai sera également modifié pour nettoyer et détruire automatiquement l'environnement de test après l'exécution de chaque test
- Utilisation de ES2017+ comme sortie par défaut : ils identifieront les barrages routiers et les supprimeront afin que la langue de sortie par défaut puisse être mise à niveau
- Intégration de MDC Web dans un matériau angulaire
- Améliorer l'accessibilité des composants Angular Material
- Publication de guides sur des concepts avancés tels que la détection des changements, le profilage des performances, les interactions avec Zone.js, etc.
- Mise à jour de la stratégie de tests e2e (cfr ci-dessus)
- Préparation de la mise à niveau vers RxJS v7+. Comme vous le savez peut-être, RxJS 7 a été sorti récemment. Espérons que nous devrions bientôt être en mesure de mettre à niveau
À l'avenir, l'équipe Angular prévoit de :
- Examinez l'architecture micro frontend : ils pourraient nous permettre de créer facilement des micro frontends à l'aide d'Angular
- Améliorez l'expérience des développeurs avec une saisie stricte pour les formulaires angulaires (nous en avons désespérément besoin)
- Rendre Zone.js facultatif, ce qui devrait simplifier le framework, améliorer le débogage, réduire la taille des bundles et même permettre de tirer parti de la syntaxe async/wait native
- Améliorez les performances de construction en intégrant le compilateur Angular (
ngc
) en tant que plug-in de compilateur TypeScript - Autoriser l'ajout de directives aux éléments hôtes. Cela aussi est demandé par la communauté depuis longtemps !
- Rendre NgModules facultatif pour faciliter la courbe d'apprentissage
- Nous fournir des moyens plus faciles d'implémenter le fractionnement de code au niveau des composants
Matériau angulaire et CDK angulaire
Migration insensée
En interne, Angular Material et CDK ont migré vers le nouveau système de modules Sass.
Si votre application utilise l'un de ceux-ci, vous devrez vous assurer que vous avez remplacé node-sass
by sass
: https://www.npmjs.com/package/sass. Le node-sass
le paquet n'est plus maintenu !
Avec cette migration, l'API de thèmes de Sass a été améliorée et nous permet désormais de tirer parti des @use
utilitaire.
Il existe désormais un point d'entrée unique pour @angular/material
ainsi que @angular/cdk
.
Enfin, les API ont également été modifiées pour plus de clarté. De nombreuses fonctions, mixins et variables ont été renommés en cours de route.
Vous pouvez trouver plus d'informations sur ces changements dans le nouveau guide thématique : https://github.com/angular/components/blob/master/guides/theming.md. De plus, notez que les guides sur https://material.angular.io ont été réécrits pour présenter la nouvelle API, et incluent des explications.
Le processus de mise à niveau migrera automatiquement le code vers la nouvelle API Sass. Vous pouvez trouver des exemples avant/après ici.
Modifications angulaires du CDK
La version 12 comprend un certain nombre de change au CDK angulaire.
Ici, je ne listerai que les nouvelles fonctionnalités, mais vous pouvez consulter les notes de version si vous souhaitez des détails sur les corrections de bogues et les améliorations de performances :
- Glisser-déposer: L'événement supprimé inclut désormais un
dropPoint
propriété, déterminant le point exact où la souris a pointé lorsque l'élément a été déposé. Plus d'informations ici - Glisser-déposer: Le conteneur d'aperçu peut maintenant être personnalisé
- lampe de table: Une nouvelle directive permet de activer le répéteur de vue de recyclage, qui met en cache les lignes supprimées et les réutilise lorsque l'ensemble de données change. Cela peut aider à améliorer les performances (réduire la latence)
- lampe de table: Ajouté les décalages des éléments collants sur le
StickyUpdate
interface - Stepper: Lorsqu'un utilisateur essaie de s'éloigner d'une étape, un
interacted
l'événement sera désormais émis - Stepper: L'orientation peut maintenant être modifié
- Accessibilité: Un
FocusOptions
objet peut maintenant être passé dans les différentes méthodes de focus trap - Essais: Nouvel environnement de harnais WebDriver. Je n'ai pas encore plongé dans celui-ci donc je ne peux pas vous en dire plus. Vérifier le PR
Changements de matériau angulaires
Il existe également un certain nombre de modifications pour le matériau angulaire. Encore une fois, consultez les notes de version pour la liste complète des corrections de bogues.
Nouvelles fonctionnalités:
- Sélecteur de date: ne dépend plus en dialogue
- Stepper: L'orientation peut maintenant être modifiée dynamiquement (cfr changement similaire dans le CDK)
- Stepper: permet au contenu d'être rendu paresseusement
- Menu: Permet de mettre à jour la position du menu par programmation
- Erreur de tapis: utilise maintenant
aria-live="polite"
au lieu derole="alert"
. Plus de détails ici - Tabs: Ajouter une méthode à définir par programme le focus sur un onglet spécifique
- Liste: renvoie maintenant un tableau avec les options modifiées du
selectAll
ainsi quedeselectAll
méthodes. Vérifier le PR pour information - Bascule à glissière: Permettre à configurer globalement une couleur par défaut via un fournisseur
- infobulle: expose maintenant la position effective de l'info-bulle via une classe sur le composant
- Radio, Case à cocher ainsi que Slider: Incluez la couleur d'arrière-plan de ces composants dans le imprimer des feuilles de style
Il y a également un certain nombre de changements sur la version expérimentale : https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental.
Universel angulaire
Angular Universal 12 est également fraîchement sorti du four.
Avec cette version, Universal maintenant inline CSS critique par défaut, ce qui est plutôt cool.
Universal inclut désormais un nouveau proxyConfig
option pour fournir des configurations de proxy personnalisées au ssr-dev-server
constructeur.
Dans cette version, il y a un nouveau moteur SSR (expérimental) appelé Clover (ça me rappelle un outil de qualité dans l'écosystème Java). Ce nouveau moteur semble prometteur. Il vise à simplifier les choses, à nous débarrasser de la Window is undefined
erreur, supprimez le besoin de plusieurs builds pour SSR/prerender, générez des shells d'application sans build supplémentaire, et plus encore. Nous en entendrons probablement plus parler plus tard. Si vous êtes curieux, consultez le PR.
Cette version comprend un constructeur qui peut être utilisé pour générer des pages statiques (c'est-à-dire un pré-rendu) en utilisant la nouvelle approche Universal Clover.
Enfin, cette version comprend également Prise en charge de TLS pour le serveur de développement.
Google Maps
Comme vous le savez, Angular inclut des composants pour Google Maps et Youtube. La version 12 apporte quelques améliorations pour le composant Google Maps :
- Comprend désormais un
icon
entrée pour personnaliser facilement le marqueur - Émet maintenant un
clusterClick
événement lorsqu'un cluster a été cliqué - Inclus un emballage autour de l'API Google Maps Geocoder, et exporte
MapDirectionsResponse
, qui n'a pas été exposé avant - Introduit la prise en charge de rendu des cartes thermiques
- Ajouté
MapDirectionsRenderer
, permettant de rendre les directions sur une carte, etMapDirectionsService
, qui enveloppegoogle.maps.DirectionsService
pour calculer trajets entre deux points. - Nouveauté
options
entrée sur le groupe de marqueurs, similaire aux autres directives.
Mise à niveau
Comme d'habitude, un guide de mise à niveau complet est disponible, et ng update
vous aidera : https://update.angular.io/?l=3&v=11.0-12.0
Si vous utilisez Nrwl NX (vous devriez vraiment), notez que Nx 12.3 inclut déjà la prise en charge d'Angular 12 ! En savoir plus à ce sujet ici. Comme avantage supplémentaire, Nx vous aidera également à migrer de TSLint vers ESLint (et il est temps !)
Conclusion
Dans cet article, j'ai exploré les nouvelles fonctionnalités d'Angular 12.
Comme d'habitude, cette version est héroïque (qu'est-ce que ça pourrait être d'autre ?! 😎).
Ivy va de l'avant, et j'espère que nous serons « bientôt » moins ennuyés par ngcc
, à mesure que l'écosystème migre. Il y a un certain nombre de changements impressionnants avec cette version, alors vérifiez-la et mettez à niveau maintenant !.
C'est tout pour aujourd'hui!
PS : Si vous voulez apprendre des tonnes d'autres choses intéressantes sur le développement de produits/logiciels/Web, consultez le Concepts de développement série, (https://mailchi.mp/fb661753d54a/developassion-newsletter)[subscribe to my newsletter], et viens dire bonjour sur Twitter!
- Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
- Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
- La source: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- Capable
- Qui sommes-nous
- à propos de ça
- au dessus de
- Absolute
- Accepter
- Accepte
- accès
- accessibilité
- Compte
- avec précision
- actually
- ajoutée
- ajout
- Avancée
- Avantage
- Après
- vise
- Alerte
- algorithme
- algorithmes
- Tous
- Permettre
- permet
- seul
- déjà
- alternative
- des alternatives
- Bien que
- toujours
- parmi
- ainsi que
- Angulaire
- animations
- annoncé
- NOUVEAUTÉ!
- Une autre
- de n'importe où
- api
- Apis
- appli
- apparaître
- Application
- applications
- une approche
- Avril
- architecture
- autour
- tableau
- article
- sur notre blog
- associé
- attributs
- auteurs
- Automatique
- automatiquement
- disponibilité
- disponibles
- Babel
- RETOUR
- Back-end
- fond
- barre
- basé
- base
- car
- before
- va
- profiter
- Améliorée
- jusqu'à XNUMX fois
- Big
- Le plus grand
- Bit
- blog
- brand
- NOUVEAU
- Rupture
- Apporte
- Apporté
- navigateur
- navigateurs
- Punaise
- construire
- constructeur
- Développement
- construit
- intégré
- Pack de blanchiment
- fardeau
- appelé
- appel
- capacités
- maisons
- cas
- Causes
- causé
- Change
- Modifications
- vérifier
- Contrôles
- Chrome
- clarté
- classe
- les classes
- clair
- clairement
- Se ferme
- Grappe
- code
- Collecte
- Couleur
- Venir
- commentaires
- Communautés
- compatibilité
- compatible
- complet
- compliqué
- composant
- composants électriques
- concepts
- concerné
- conclusion
- connecté
- considère
- cohérent
- constant
- consommer
- Contenant
- contenu
- contexte
- continuer
- des bactéries
- contrôleur
- contrôles
- Freddi
- Core
- correspond
- Prix
- pourriez
- cours
- couverture
- couvert
- engendrent
- créée
- La création
- création
- critique
- navigateur croisé
- crucial
- CSS
- curieux
- Courant
- Lecture
- Customiser
- propriétés personnalisées
- personnaliser
- Date
- journée
- jours
- parfaite
- affaire
- profond
- Réglage par défaut
- dépend
- déployer
- profondeur
- détail
- détails
- Détection
- détermine
- détermination
- dev
- Développeur
- Développement
- DID
- différent
- DIG
- directives
- directement
- distribué
- distributions
- faire
- DOM
- down
- download
- inconvénient
- chuté
- Drops
- doublons
- pendant
- chacun
- plus facilement
- même
- risque numérique
- Efficace
- effort
- non plus
- éléments
- intégré
- permettre
- permet
- encapsulé
- end-to-end
- énergie
- Moteur
- améliorée
- assez
- assurer
- entrée
- Environment
- environnements
- erreur
- Erreurs
- notamment
- etc
- Ether (ETH)
- évaluer
- Pourtant, la
- événement
- événements
- tout le monde
- peut
- évolué
- évolution
- exemple
- exemples
- excellent
- exception
- exécuter
- exécution
- existant
- étendu
- attendu
- Découvrez
- Expliquer
- expliqué
- expliquant
- Explique
- explication
- Exploré
- explorateur
- exportations
- exposé
- expressions
- étendre
- extension
- externe
- supplémentaire
- faciliter
- FAIL
- équitablement
- Automne
- ventilateur
- RAPIDE
- plus rapide
- peur
- Fonctionnalité
- Fonctionnalités:
- Fédération
- Réactions
- few
- champ
- Des champs
- Déposez votre dernière attestation
- Fichiers
- finalement
- Trouvez
- trouver
- Incendie
- Fixer
- flux
- Focus
- se concentre
- Abonnement
- Force
- formulaire
- le format
- document
- Avant
- trouvé
- Fondations
- fraction
- CADRE
- Framework
- de
- L'extrémité avant
- plein
- fonction
- fonctions
- plus
- avenir
- générer
- génère
- générateur
- obtenez
- GitHub
- Donner
- donné
- donne
- Don
- Go
- aller
- Bien
- Google Chrome
- googlemaps
- graphique
- l'
- guide
- Guides
- manipuler
- Dur
- ayant
- entendu
- aider
- ici
- hi
- Haute
- Souligner
- Histoire
- Crochets
- Avec optimisme
- hôte
- Comment
- HTML
- HTTPS
- majeur
- lisible par l'homme
- MAUVAIS
- idée
- identifié
- identifier
- Impact
- Mettre en oeuvre
- la mise en oeuvre
- mis en œuvre
- importer
- important
- importations
- améliorer
- amélioré
- amélioration
- améliorations
- in
- comprendre
- inclus
- inclut
- à tort
- indique
- indirectement
- info
- d'information
- possible
- technologie innovante
- contribution
- idées.
- installer
- installer
- instance
- plutôt ;
- Des instructions
- intégrer
- Intégration
- l'intégration
- interactions
- intéressant
- Interfaces
- interne
- Internet
- introduire
- introduit
- Introduit
- Découvrez le tout nouveau
- intuitif
- investi
- seul
- vous aider à faire face aux problèmes qui vous perturbent
- IT
- Java
- JIT
- Emploi
- rejoindre
- json
- XNUMX éléments à
- Genre
- Savoir
- langue
- plus importantes
- Nom de famille
- Latence
- Nouveautés
- Ligue
- fuite
- APPRENTISSAGE
- apprentissage
- Legacy
- Niveau
- Levier
- bibliothèques
- Bibliothèque
- Gamme
- LINK
- lié
- Liste
- emplacement
- Location
- Longtemps
- long-term
- plus long
- Style
- regardé
- recherchez-
- Lot
- Faible
- LES PLANTES
- maintenir
- maintient
- majeur
- Majorité
- faire
- FAIT DU
- Fabrication
- de nombreuses
- Localisation
- Map
- Match
- assorti
- Matériel
- Matrice
- max
- veux dire
- Mémoire
- Menu
- aller
- message
- messages
- Métadonnées
- méthode
- méthodes
- Microsoft
- pourrait
- émigrer
- migration
- minimum
- mineur
- manquant
- erreur
- Mode
- Villas Modernes
- module
- Modules
- PLUS
- (en fait, presque toutes)
- Bougez
- en mouvement
- Mozilla
- plusieurs
- Nommé
- à savoir
- noms
- indigène
- NAVIGUER
- nécessaire
- Besoin
- Besoins
- négatif
- net
- Nouveauté
- Nouvelles fonctionnalités
- nouvelles
- Newsletter
- next
- Next.js
- nœud
- Node.js
- nœuds
- Notes
- remarquable
- Notifications
- nombre
- numéros
- objet
- évident
- a eu lieu
- octobre
- officiel
- Officiellement
- Vieux
- ONE
- opérateur
- Option
- Options
- de commander
- organisations
- initialement
- Autre
- Points de vente
- au contrôle
- vue d'ensemble
- propre
- paquet
- Forfaits
- paramètre
- paramètres
- particulièrement
- les pièces
- passé
- En passant
- chemin
- effectuer
- performant
- performances
- effectuer
- objectifs
- pièce
- pipeline
- Place
- plans
- Platon
- Intelligence des données Platon
- PlatonDonnées
- plug-in
- Point
- popularité
- position
- possible
- Post
- l'éventualité
- solide
- précisément
- préfère
- présence
- représentent
- assez
- empêcher
- Aperçu
- précédent
- précédemment
- Avant
- Probablement
- d'ouvrabilité
- processus
- traitement
- Vidéo
- profilage
- Programme
- Projet
- projets
- prometteur
- correct
- propriétés
- propriété
- fournir
- à condition de
- fournit
- procuration
- publié
- Push
- puzzle
- qualité
- Rapide
- élevage
- gamme
- raw
- RE
- Réagir
- Lire
- réalisation
- raison
- Les raisons
- recommander
- record
- réduire
- refléter
- enregistrement
- en relation
- libérer
- libéré
- éloigné
- supprimez
- Supprimé
- rendu
- À PLUSIEURS REPRISES
- remplacé
- rapport
- nécessaire
- demandes
- exigent
- conditions
- résilient
- réponse
- REST
- résultat
- Résultats
- retourner
- retour
- Retours
- Débarrasser
- barrages routiers
- Rôle
- racine
- Itinéraire
- toupie
- Règle
- Courir
- pour le running
- des
- même
- Toupet
- Épargnez
- scénarios
- portée
- Deuxièmement
- semble
- sens
- Série
- service
- Session
- set
- mise
- installation
- Shadow
- Shorts
- devrait
- vitrine
- Signatures
- similaires
- étapes
- simplifier
- depuis
- unique
- situation
- Taille
- tailles
- Lentement
- petit
- faibles
- So
- jusqu'à présent
- sur mesure
- Solutions
- quelques
- quelque chose
- Son
- Identifier
- Space
- groupe de neurones
- stable
- Utilisation d'un
- Standard
- Normes
- Commencer
- Commencez
- Statut
- rester
- étapes
- Encore
- Arrêter
- Boutique
- stockée
- Histoire
- de Marketing
- strict
- plus strict
- structure
- Catégorie
- inscrire
- tel
- Super
- Support
- Appareils
- Les soutiens
- surprises
- Interrupteur
- combustion propre
- Tailwind
- Vent arrière
- Prenez
- prend
- prise
- Target
- équipe
- équipes
- modèle
- modèles
- tester
- Essais
- tests
- Les
- La Source
- leur
- chose
- des choses
- cette année
- Avec
- fiable
- long
- calendrier
- fois
- à
- ensemble
- jeton
- Ton
- tonnes
- trop
- outil
- les outils
- haut niveau
- vers
- tracer
- Traçant
- suivre
- Tracking
- Transformer
- transition
- Traduction
- communication
- déclencher
- oui
- types
- Manuscrit
- typiquement
- sous
- comprendre
- Universel
- inutilisé
- prochain
- Mises à jour
- a actualisé
- Actualités
- la mise à jour
- améliorer
- URL
- us
- Utilisation
- utilisé
- Utilisateur
- utilisateurs
- les services publics
- utilitaire
- validation
- validateurs
- Précieux
- Plus-value
- Valeurs
- divers
- Ve
- version
- Voir
- W3
- attendez
- voulu
- avertissement
- web
- Webpack
- semaine
- Semaines
- bienvenu
- Quoi
- que
- qui
- tout en
- WHO
- sera
- dans les
- sans
- A gagné
- merveilleux
- Activités principales
- travaillé
- de travail
- pourra
- écrire
- écriture
- code écrit
- X
- an
- Votre
- Youtube
- zéphyrnet