Sélectionner une page

Formation > Blog > Langage > Angular 6 : les nouveautés de la dernière version

Angular 6 va bientôt sortir ! En effet, cette nouvelle version du framework web de Google, qui devait être prévue fin mars 2018 et remporté mi-avril, apporte quelques changements que nous allons vous présenter.

Pour le moment vous avez la possibilité de tester la version Angular 6.0.0-rc.1, disponible en téléchargement.

On peut constater que le cycle de publication est très rapide, avec une publication chaque semaine, 6 betas prévu (une 7ème s’est rajouté) et 3 Release Candidate sont prévues au programme. Ce qui nous donne une date de sortie prévue pour mi-avril pour la version finale !

Au passage, si vous le souhaitez nous organisons des formations en France, en Suisse, au Luxembourg et en Belgique sur Angular.

Angular 5.2.x

Les nouveautés de la 5.2.1 sont :

  • core: add binding name to content changed error (#20352) (4556532)
    • Pratique & évite les confusions : lors d’une levée d’erreur, le nom explicite de la liaison de donnée est contenu dans le message lui-même
  • forms: handle string with and without line boundary on pattern validator (#19256) (75f8522)
    • Meilleure gestion des regex sur les validators sur les chaines de caractères de taille fixe

Les versions 5.2.2 à 5.2.9, permettent de fixer différents bugs mineurs.

Nouveautés d’Angular 6

Les mises à jour seront indiquées ici au fur & à mesure de l’avancement du développement.

Concernant la version 6, les développeurs continue leurs efforts pour minimiser la taille de vos applications web tout en améliorant la productivité de développement de vos Progressive Web Apps. Pour atteindre ces objectifs, un nouveau moteur de rendu appelé Ivy a été développé. La version bêta ajoute également un type générique rétrocompatible pour prendre en charge les nativeElement.

Les nouvelles caractéristiques d’Angular 6.0.0-beta.0 : (mis à jour : 25 janvier 2018)

  • bazel: allow ng_module rules to control whether type checking is enabled (#21460) (cffa0fe)
  • core: add binding name to content changed error (#20352) (d3bf54b)
  • forms: handle string with and without line boundary on pattern validator (#19256) (54bf179)

Avec une amélioration des performances :

  • ivy: add missing dom element in render3_function tree benchmark (#21476) (9b5a485)

Les nouvelles caractéristiques d’Angular 6.0.0-beta.1 :  (mis à jour : 31 janvier 2018)

Les nouvelles caractéristiques d’Angular 6.0.0-beta.2 :  (mis à jour : 7 février 2018)

  • router: add navigationSource and restoredState to NavigationStart event (#21728) (c40ae7f)
  • service-worker: add helper script which will uninstall SW (#21863) (b10540a)

Les nouvelles caractéristiques d’Angular 6.0.0-beta.3 :  (mis à jour : 25 janvier 2018)

  • compiler-cli: reflect static methods added to classes in metadata (#21926) (eb8ddd2)
  • ivy: add canonical example of a pipe. (#21834) (743d8bc)
  • ivy: add support for attributes on ng-content nodes (#21935) (1aa2947)
  • ivy: memoize array literals in render3 (#21973) (4d62be6)

Les nouvelles caractéristiques d’Angular 6.0.0-beta.4 :  (mis à jour : 14 janvier 2018)

  • bazel: allow explicit specification of factories (#22003)(10cef33)
  • compiler: mark @NgModules in provider lists for identification at runtime (#22005)
  • forms: multiple validators for array method (#20766) (941e88f), closes #20665
  • change @Injectable() to support tree-shakeable tokens (#22005) (235a235)

Les nouvelles caractéristiques d’Angular 6.0.0-beta.5 :  (mis à jour : 21 janvier 2018)

  • common: better error message when non-template element used in NgIf (#22274) (67cf11d), closes #16410
  • compiler-cli: Check unvalidated combination of ngc and TypeScript (#22293) (3ceee99), closes #20669
  • core: support metadata reflection for native class types (#22356) (5c89d6b), closes #21731
  • platform-browser: do not throw error when Hammer.js not loaded (#22257) (991300b), closes #16992
  • platform-browser: fix #19604, can config hammerOptions (#21979) (1d571b2)

BREAKING CHANGES

  • animations: When animation is triggered within a disabled zone, the associated event (which an instance of AnimationEvent) will no longer report the totalTime as 0 (it will emit the actual time of the animation). To detect if an animation event is reporting a disabled animation then the event.disabled property can be used instead.
    • Lorsque l’animation est déclenchée dans une zone désactivée, l’événement associé ne signale plus le totalTime à 0, il émettra l’heure réelle de l’animation
  • forms: ngModelChange is now emitted after the value/validity is updated on its control.

Previously, ngModelChange was emitted before its underlying control was updated. This was fine if you passed through the value directly through the $event keyword, e.g.

<input name="" type="text" />
onChange(value) {
console.log(value); // would log updated value
}

However, if you had a handler for the ngModelChange event that checked the value through the control, you would get the old value rather than the updated value. e.g:

<input name="" type="text" />
onChange(ngModel: NgModel) {
console.log(ngModel.value); // would log old value, not updated value
}

Now the value and validity will be updated before the ngModelChange event is emitted, so the same setup will log the updated value.

onChange(ngModel: NgModel) {
console.log(ngModel.value); // will log updated value
}

We think this order will be less confusing when the control is checked directly. You will only need to update your app if it has relied on this bug to keep track of the old control value. If that is the case, you should be able to track the old value directly by saving it on your component.

Les nouvelles caractéristiques d’Angular 6.0.0-beta.6 :  (mis à jour : 01 mars 2018)

BREAKING CHANGES

  • platform-server: * Bump the dependency on Domino to 2.0 to resolve issues with namespacing
  • forms: – AbstractControl#statusChanges now emits an event of ‘PENDING’ when you call AbstractControl#markAsPending
  • Previously it did not emit an event when you called markAsPending
  • To migrate you would need to ensure that if you are filtering or checking events from statusChanges that you account for the new event when calling markAsPending
  • animations: When animation is trigged within a disabled zone, the associated event (which an instance of AnimationEvent) will no longer report the totalTime as 0 (it will emit the actual time of the animation). To detect if an animation event is reporting a disabled animation then the event.disabled property can be used instead.

Les nouvelles caractéristiques d’Angular 6.0.0-beta.7 :  (mis à jour : 08 mars 2018)

Aucune nouvelles caractéristiques pour cette beta, rajouté aux planning pour corriger quelques bugs, elle décale donc la sortie de la version finale d’Angular 6 au 4 Avril.

Les nouvelles caractéristiques d’Angular 6.0.0-beta.8 :  (mis à jour : 17 mars 2018)

CODE REFACTORING

  • compiler: Drop support for the deprecated . Use  instead (#22783) (0ebd577)

    BREAKING CHANGES

    • compiler: The  tag was deprecated in Angular v4 to avoid collisions (i.e. when using Web Components).

      This commit removes support for .  should be used instead.

      BEFORE:

      some template content
      # tsconfig.json
      {
      # ...
      "angularCompilerOptions": {
      # ...
      # This option is no more supported and will have no effect
      "enableLegacyTemplate": [true|false]
      }
      }
      
      

      AFTER:

      some template content
      
      
      • core: it is no longer possible to import animation-related functions from @angular/core. All animation symbols must now be imported from @angular/animations.
      • after this change, npm and yarn will issue incompatible peerDependencies warning

      We don’t expect this to actually break an application, but the application/library package.json will need to be updated to provide tslib 1.9.0 or higher.

      Les nouvelles caractéristiques d’Angular 6.0.0-rc.0 :  (mis à jour : 22 mars 2018)

      Les nouvelles caractéristiques d’Angular 6.0.0-rc.1 :  (mis à jour : 30 mars 2018)

      • bazel: prefix private-export (barred-latin-o) symbols (#23007) (27e14b2)
      • compiler: lower @NgModule ids if needed (#23031) (bd024c0)

      L’équipe Angular travaille sur l’ajout, la mise à jour ainsi qu’un renommage plus claire de certaines fonctionnalités, telle que l’intégration de TypeScript 2.5.x, par exemple, l’amélioration des messages d’erreurs, le renommage de certaines fonctions, la suppression de la génération de commentaires, etc. Vous pouvez voir les détails (en anglais) ci-dessous :

        • Added Angular Material and CDK Stable Release
        •  Support Service Worker in the CLI :
            • ng generate universal 
          • ng build —app=
        • Improved Universal and AppShell Support in the CLI :
          • ng generate app-shell [ –universal-app ] [ –route ]
        • Improved decorator error messages
        • TypeScript 2.5.x support :
          • npm install typescript@’~2.5.3′
        • And many more things are available
        • Added to support – nativeElement
        • Re-introduce Query Predicate with more focused role
        • Add missing lifecycle tests for projected components
        • Describe safety worker
        • Add afterContentInit and afterContentChecked to render
        • Some fixes on language service :
          • The 2.6 version of Typescript’s “resolveModuleName” started to require paths passed to be separated by ‘/’ instead of being able to handle  ».
        • Move init hooks into TView
        • Correct onDestroy order for projected components
        • Add type and hooks to directive def
        • Enable size tracking of a minimal CLI render3 application
        • Fix platform-detection example for Universal
        • Add canonical view query
        • Some enhancements on compiler to reflect changes
        • Rename QueryPredicate to LQuery
        • Rename LQuery to LQueries and associated renames
        • Allow HttpInterceptors to inject HttpClient :
            • Previously, an interceptor attempting to inject HttpClient directly would receive a circular dependency error, as HttpClient was constructed via a factory which injected the interceptor instances. Users want to inject HttpClient into interceptors to make supporting
          • Either HttpClient or the user has to deal specially with the circular Dependency. This change moves that responsibility into HttpClient itself. By utilizing a new class HttpInterceptingHandler which lazily Loads the set of interceptors at request time, it’s possible to inject HttpClient directly into interceptors as construction of HttpClient no longer requires the interceptor chain to be constructed.
        • Add navigationSource and restoredState to NavigationStart :
          • Currently, NavigationStart there is no way to know if navigation was triggered imperatively or via the location change. These two use cases should be handled differently for a variety of use cases (e.g., scroll position restoration). This PR adds a navigation source field and restored navigation id (passed to navigations triggered by a URL change).
        • Removes generation of comments
      • Fix SideNav height on narrow screens :
        • Since we specify `bottom: 0`, specifying the height is unnecessary and Leads to wrong height (unless updated) on narrow screens where the topbar height is decreased.

      Comme toujours, il y a une liste de tous les changements et corrections de bugs sur GitHub.

UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?

Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.

ILS SE SONT FORMÉS CHEZ NOUS

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp