Jusqu'à ce que Stephen Fluin publie traditionnellement une nouvelle version et un article sur les fonctionnalités du nouvel Angular, j'ai essayé de tout rassembler et de répondre à la question de quoi de neuf?
Angular Ivy est l'une des fonctionnalités les plus intéressantes que nous attendions depuis près de 2 ans, et finalement Angular 9 sera compilé avec Ivy par défaut. Si vous voulez plonger dans les entrailles d'Angular Ivy, il y a 2 vidéos d'AngularConnect: sur Compiler et Runtime .
Comme toujours avec la CLI angulaire, vous pouvez mettre à niveau assez facilement, un guide détaillé .
Vérification du type de modèle
L'indicateur strictTemplates sera ajouté en plus de fullTemplateTypeCheck, il ne fonctionnera que dans Ivy. En mode complet sera:
vérification de la liaison des composants et des directives à @Input
lors de la vérification, les caractères typographiques strictNullChecks seront vérifiés
vérification des types de composants et des directives, y compris génériques
vérification du modèle dans le contexte d'exécution, par exemple à l'intérieur de * ngFor
vérification du type d'événements $ event dans les composants et les directives, également lors de l'animation
vérifier les types corrects pour les références locales des éléments DOM, par exemple, lorsque document.createElement retournera une balise
Avec des modèles de vérification de type aussi stricts, il est parfois nécessaire de désactiver cette vérification, nous avons donc trouvé $ any () auquel la vérification ne sera pas effectuée.
Exemple: {{$ any (person) .addresss.street}}
@ContentChildren
ContentChild Par défaut ne fonctionnera qu'avec les enfants directs
<comp> <div #bar> <!-- new runtime --> <div #foo></div> <!-- matches in old runtime --> </div> </comp>
Pour ce faire, vous devrez couper les descendants du drapeau
@ ContentChildren ('foo', { descendants : false}) foos: QueryList < ElementRef >
DI
Toutes les classes qui utilisent Angular DI doivent avoir un décorateur angulaire, tel que @Directive() ou @Injectable (les classes précédemment non décorées n'étaient autorisées qu'en mode AOT ou si elles étaient utilisées via Inject). Par défaut, la CLI doit les mettre à niveau correctement.
À:
export class MyService {...} export class MyOtherService {...} export class MyThirdClass {...} export class MyFourthClass {...} export class MyFifthClass {...} @NgModule({ providers: [ MyService, {provide: SOME_TOKEN, useClass: MyOtherService},
Après:
@Injectable() export class MyService {...} @Injectable() export class MyOtherService {...} export class MyThirdClass {...} export class MyFourthClass {...} export class MySixthClass {...}
À:
{provide: MyToken}
Après:
{provide: MyToken, useValue: undefined}
Les entrées pour les directives (par exemple, nom dans <mon-nom comp = "">) sont désormais définies lors de la création d'une vue avant la détection des modifications (auparavant, elles étaient toutes définies lors de la détection des modifications).
Un peu plus intéressant
Des propriétés telles que l'hôte dans @Component et @Directive peuvent être héritées (auparavant, seules les propriétés avec des champs explicites tels que @HostBinding étaient héritées).
La prise en charge de HammerJS est fournie via l'importation HammerModule (auparavant, elle était toujours incluse dans les packages de travail, que l'application utilise HammerJS ou non).
Si le jeton est injecté avec l' @Host ou @Self , l'injecteur de module ne recherche pas ce jeton (auparavant, les jetons marqués avec ces indicateurs seraient toujours recherchés au niveau du module).
Lorsque vous accédez à plusieurs liens locaux dans le modèle avec le même nom, le premier est pris (la dernière instance a été prise plus tôt).
Les directives utilisées dans le module exporté (mais non exportées par elles-mêmes) sont exportées publiquement (auparavant, le compilateur enregistrait automatiquement l'exportation privée avec un alias afin qu'il puisse utiliser ses connaissances globales pour résoudre les conflits)
Les fonctions externes ou les constantes externes dans les métadonnées de décorateur ne sont pas résolvables statiquement (auparavant, vous pouviez importer une constante ou une fonction à partir d'un autre module compilé, par exemple, à partir d'une bibliothèque, et utiliser cette constante / fonction dans votre définition @NgModule ).
Les références d'entrée directe dans les directives accessibles via les liens locaux ne sont plus prises en charge par défaut.
S'il existe un attribut de classe non lié et une liaison via [classe], les classes de l'attribut non lié seront également ajoutées (auparavant, la liaison via la classe a réécrit les classes dans l'attribut non lié).
Il n'est plus possible de remplacer les hooks de cycle de vie par des mocks sur les instances de directives à tester (pour ce faire, modifiez les hooks de cycle de vie sur la directive elle-même).
Les jetons d'injection spéciaux (tels que TemplateRef ou ViewContainerRef) renvoient une nouvelle instance chaque fois qu'ils sont demandés (auparavant, les instances étaient fouillées si elles étaient demandées à partir de nœuds similaires). Cela affecte principalement les tests qui comparent l'identité de ces objets.
L'analyse ICU se produit au moment de l'exécution, donc seuls le texte, les balises HTML et les classeurs de texte sont autorisés (auparavant, les directives étaient également autorisées dans les expressions ICU).
Obsolète
Les modifications importantes apportées à l'API sont présentées ici, et ce qui était déjà sous Obsolète sera supprimé.
Suppression des API obsolètes
Et si cela ne suffit pas, il y en a un peu plus .
Eh bien, nous attendons la sortie d'Angular 9 après les vacances de Noël =):
Pour info, j'ai pris la décision de maintenir la version #Angular 9.0 jusqu'à l'année prochaine afin que nous puissions tous et nous prendre des congés au cours des prochaines semaines. Joyeuses Fêtes et à bientôt en 2020!
Et bien sûr, abonnez-vous à la chaîne dans le télégramme @ngFanatic où d'autres nouvelles sur Angular seront publiées.