web-dev-qa-db-fra.com

Différences entre Angular 5 et Angular 6

Quelles sont les différences entre Angular 5 et Angular 6. Comment puis-je mettre à jour notre application de Angular 5 à Angular 6? 

Quelles sont les principales différences entre Angular 5 et Angular 6?

5
zeeshan Qurban

Les nouvelles fonctionnalités de Angular 6 sont répertoriées dans le lien ci-dessous: https://www.infoworld.com/article/3213244/javascript/whats-new-in-angular-version-6-is-here. html

vous pouvez vous référer au lien ci-dessous pour migrer vers Angular 6: Vous souhaitez mettre à niveau le projet de Angular v5 à Angular v6

8
Sankar Narayanan

Angulaire 6 changements:

1) Prise en charge de TypeScript 2.7+

2) Matériau angulaire ajouté et écurie CDK

3) Kit de développement de composants (CDK) - CDK vous permet de créer votre propre bibliothèque de composants d’interface utilisateur à l’aide de Angular Material.

4) Amélioration des messages d'erreur du décorateur

5) Correction d'un exemple de détection de plate-forme pour Universal

6) Ivy Renderer - Il s’agit d’un nouveau domaine compatible avec les versions antérieures et axé sur l’amélioration de la vitesse, la réduction de la taille et une flexibilité accrue.

7) Ajouter afterContentInit et afterContentChecked pour rendre

8) Ajouté aux supports de nativeElement

9) Ajout du type générique facultatif pour ElementRef L'exemple ressemble à - @ ViewChild ('votre-élément') yourElement: ElementRef;

10) Bazel Compiler - Bazel ne reconstruit que ce qui est nécessaire.

11) Commentaire de test ajouté

12) Ajouter les tests de cycle de vie manquants pour les composants projetés

13) Compilateur Closure - Le compilateur Closure génère systématiquement des ensembles plus petits.

14) Renommez QueryPredicate en LQuery et LQuery en LQueries

15) Service Worker - Service worker est un script qui s'exécute dans le navigateur Web. Il gère également la mise en cache pour une application.

16) Ajout de plusieurs validateurs pour la méthode de tableau de FormBuilder

17) Gestion de la chaîne avec et sans limite de ligne - Now Gestion de la chaîne avec et sans limite de ligne (^ & $) sur les validateurs de modèle. Auparavant, cela fonctionnait avec des chaînes, pas des limites.

18) AbstractControl statusChanges - La version précédente n’émet pas d’événement lorsque vous avez appelé «markAsPending», mais émet maintenant un événement «PENDING» lorsque vous appelez AbstractControl markAsPending.

19) Mises à jour sur NgModelChange - Maintenant émis après la valeur et la validité est mise à jour lors de son contrôle. Auparavant, il était émis avant d'être mis à jour.

20) Autoriser HttpInterceptors à injecter HttpClient – Auparavant, un intercepteur essayant d’injecter directement HttpClient recevait une erreur de dépendance circulaire, car HttpClient était construit via une usine qui injectait les instances d’intercepteur. Les utilisateurs veulent injecter HttpClient dans des intercepteurs pour assurer la prise en charge.

HttpClient ou l'utilisateur doit traiter spécialement avec la dépendance circulaire. Ce changement déplace cette responsabilité dans HttpClient lui-même. En utilisant une nouvelle classe HttpInterceptingHandler qui charge paresseusement l'ensemble d'intercepteurs au moment de la demande, il est possible d'injecter HttpClient directement dans les intercepteurs car la construction de HttpClient ne nécessite plus la construction de la chaîne d'intercepteurs.

21) Ajouter navigationSource et restoreState à NavigationStart - Actuellement, NavigationStart ne permet pas de savoir si la navigation a été déclenchée impérativement ou via le changement de position. Ces deux cas d'utilisation doivent être gérés différemment pour une variété de cas d'utilisation (par exemple, restauration de la position du défilement). Ce PR ajoute un champ source de navigation et un identifiant de navigation restauré (transmis aux navigations déclenchées par un changement d'URL).

22) Ajouter le type et les crochets à la directive def

23) Activer le suivi de la taille d'une application CLI render3 minimale

24) Ajouter une requête de vue canonique

25) Service de langage - La version 2.6 de «resolModuleName» de TypeScript a commencé à exiger que les chemins transmis soient séparés par un '/' au lieu de pouvoir gérer '\'.

Pour plus de détails: Cliquez ici

11
  1. Vous pouvez mettre à jour votre application Angular 5 en angular v6, Référez-vous à cette adresse http://www.talkingdotnet.com/upgrade-angular-5-app-angular-6-visual-studio-2017/

  2. Vous pouvez également voir les principaux changements entre les angles 5 et 6, https://dzone.com/articles/angular-6-release-vs-angular-5-new-features-and-im

3
ketan chaudhari

Dans Angular 6, par défaut, ce décorateur est configuré avec une propriété "providedIn", qui crée un fournisseur pour le service. Dans ce cas ,InfIn: 'racine' spécifie que le service doit être fourni dans l'injecteur de racine.

@Injectable({
    providedIn: 'root'
})
export class ApiService{
 //.......}

Autres références ici