Angular 6 Est Maintenant disponible

La Version 6 d’ Angular Est Maintenant Disponible

La version 6.0.0 d’Angular est là! C’est une version majeure qui se concentre moins sur le framework sous-jacent, et plus sur la chaîne d’outils et sur le fait de faciliter le déplacement rapide avec Angular dans le futur.

Dans le cadre de cette version, nous synchronisons les versions majeures à l’avenir pour les packages de structure. (@angular/core, @angular/common, @angular/compiler, etc), la CLI angular et le matériel angulaire + CDK. Tous sont disponible sous la version 6.0.0 aujourd’hui. Nous avons fait ce changement pour clarifier la compatibilité croisée. Les versions mineures et les correctifs pour ces projets seront publiées en fonction des besoins du projet.

Voir la liste complète des modifications dans nos journaux de modifications(changelogs): framework, material+cdk, cli.

La Commande ng update

ng update <package> est une nouvelle commande CLI qui analyse votre package.json et utilise sa connaissance d’Angular pour recommander des mises à jour à votre application. Pour le voir en action, consultez notre guide de mise à jour.

Non seulement ng update vous aidera à adopter la bonne version des dépendances, et de garder vos dépendances en synchronisation, mais des tiers peuvent fournir des scripts de mise à jour en utilisant schematics. Si l’une de vos dépendances fournit une ng update schematic, elles peuvent automatiquement mettre à jour votre code lorsqu’elles ont besoin d’effectuer des modifications de rupture!

ng update ne remplacera pas votre gestionnaire de paquets, mais utilise npm ou yarn dans les coulisses pour gérer les dépendances. Outre la mise à jour des dépendances et les dépendances par les pairs, ng update appliquera les transformations nécessaires à votre projet.

Par exemple, la commande ng update @angular/core mettra à jour tous les paquets de framework Angular ainsi que RxJS et TypeScript, et exécutera schematics (tous les schémas) disponibles sur ces paquets pour vous tenir au courant. Dans le cadre de cette commande, nous installerons automatiquement rxjs-compat dans votre application pour faciliter l’adoption de RxJS v6.

Nous nous attendons à voir beaucoup plus de bibliothèques et de paquets  ng update schematics au cours des prochains mois, et nous avons déjà entendu des équipes de bibliothèques de composants d’entreprise qui prévoient d’utiliser ng update pour pousser à travers les changements importants de manière automatisée pour sauver le temps de leurs développeurs.

En savoir plus sur comment fonctionne la commande ng update. Pour commencer à créer votre propre ng update schematic, jetez un oeil à l’entrée dans le package.json de rxjs  et son associé collection.json.

La Commande ng add

Une autre nouvelle commande CLI ng add <package> rend l’ajout de nouvelles fonctionnalités à votre projet facile. ng add utilisera votre gestionnaire de paquets pour télécharger de nouvelles dépendances et invoquer un script d’installation (implémenté comme un schéma) qui peut mettre à jour votre projet avec des changements de configuration, et ajouter des dépendances supplémentaires (par exemple, polyfills), ou code d’initialisation spécifique au package scaffold (échafaudage).

Essayez quelques-unes des solutions suivantes sur votre nouvelle application ng new:

• ng add @angular/pwa — Transforme votre application en PWA en ajoutant un manifeste d’application et un agent de service
• ng add @ng-bootstrap/schematics — Ajoute ng-bootstrap à votre application
• ng add @angular/material — Installe et configure le matériau Angular et le thème et enregistre les nouveaux composants du démarreur ng generate
• ng add @clr/angular@next — Installer et configurer Clarity à partir de VMWare
• ng add @angular/elements — Ajoutez le polyfill et les dépendances document-register-element.js nécessaires pour les éléments angulaires (voir ci-dessous)

Parce que ng add est construite en haut des schematics et le registre npm, nous espérons que les bibliothèques et la communauté nous aideront à construire un riche écosystème de  ng add des paquets de soutien.

Jetez un coup d’œil sur Angular Material’s ng-add schematic (Matériel angular ng-add schématique) for an example to help you get started building your own ng-add schematics.

Éléments Angular

La première version d’Angular Éléments se concentre sur le fait de vous permettre d’amorcer les composants angular dans une application angular existante en les enregistrant en tant qu’éléments personnalisés. Nous l’utilisons largement dans angular.io dans le cadre de notre système de gestion de contenu pour permettre l’amorçage dynamique des capacités via le HTML intégré. Cela remplace le besoin d’amorcer manuellement les composants angular trouvés dans le contenu html statique.

Consultez un exemple d’enregistrement d’un composant en tant qu’élément personnalisé ou apprenez-en davantage sur les éléments angular.

Un membre de notre communauté a également produit une vidéo de démarrage rapide des éléments angular que nous vous recommandons vivement.

Matériel Angular + Composants CDK

Le plus grand ajout est le nouveau composant arborescence pour l’affichage des données hiérarchiques. Suivant les modèles du composant de table de données, le CDK contient les directives de l’arbre principal, Angular Material offrant la même expérience avec les styles de conception de matériaux.Nous avons récemment donné une conférence sur le composant, alors vérifiez pour plus d’informations  (vidéos, slides).Ces nouveaux composants d’arbre viennent dans les deux style (Matériel de mat-tree) et les versions non stylisées (CDK cdk-tree).

À côté de l’arbre, nous avons également de nouveaux composants badge et bottom-sheet components.

Les badges aident à afficher de petites quantités d’informations utiles, telles que le nombre d’éléments non lus. Les feuilles de fond (Bottom-sheets) sont un type spécial de boîtes de dialogue centrées sur le mobile qui proviennent du bas de la fenêtre, couramment utilisées pour présenter une liste d’options à la suite d’une action.

Le package @angular/cdk/overlay est l’un des éléments d’infrastructure les plus puissants de la CDK aujourd’hui. Avec la sortie de la version 6, ce paquet inclut maintenant une nouvelle logique de positionnement qui aide à faire des pop-ups qui restent intelligemment à l’écran dans toutes les situations.

Les Composants Angular Material Starter

Une fois que vous avez exécuté ng add @angular/material pour ajouter du matériel à une application existante, vous pouvez également générer 3 nouveaux composants de démarrage.

Material Sidenav

Vous pouvez maintenant générer un composant de démarrage comprenant une barre d’outils avec le nom de l’application et la navigation latérale. Ce composant est réactif en fonction des points d’arrêt.

Executer:

ng generate @angular/material:material-nav --name=my-nav

Cela va créer ce composant de démarrage:

Tableau de bord du matériel

Vous pouvez maintenant générer un composant de tableau de bord de démarrage contenant une liste de cartes dynamique.

Executer:

ng generate @angular/material:material-dashboard --name=my-dashboard

Cela va créer ce composant de démarrage:

Table de données du matériel

Vous pouvez générer un composant de table de données de démarrage préconfiguré avec une datasource pour le tri et la pagination.

Executer:

ng generate @angular/material:material-table --name=my-table

Cela va créer ce composant de démarrage:

En savoir plus sur les schémas du matériel angular disponibles.

Espaces De Travail CLI

CLI v6 prend désormais en charge les espaces de travail contenant plusieurs projets, tels que plusieurs applications ou bibliothèques. Les projets CLI vont maintenant utiliser angular.json au lieu de .angular-cli.json for build and project configuration.

Chaque espace de travail CLI a des projets, chaque projet a des cibles et chaque cible peut avoir des configurations.

{
  "projects": {
    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "configurations": {
            "production": {},
            "demo": {},
            "staging": {},
          }
        },
        "serve": {},
        "extract-i18n": {},
        "test": {},
      }
    },
    "my-project-name-e2e": {}
  },
}

En savoir plus sur le nouveau fichier de configuration

Support des bibliothèques

L’une des fonctionnalités les plus demandées pour notre CLI a été le support pour la création et la construction de bibliothèques, et nous sommes fiers d’introduir:

ng generate library <name>

Cette commande crée un projet de bibliothèque dans votre espace de travail CLI et le configure pour le test et la création.

En savoir plus sur la création de bibliothèques avec l’interface de ligne de commande angular CLI

Fournisseurs Shakable Tree

Pour réduire la taille de vos applications, nous sommes passés des services de référencement de modules à des modules de référencement de services. Cela nous permet de regrouper uniquement les services dans votre base de code dans les modules où ils sont injectés.

Avant

@NgModule({
  ...
  providers: [MyService]
})
export class AppModule {}

import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
  constructor() { }
}

Après

Aucune référence n’est nécessaire dans notre NgModule.

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor() { }
}

Read more about Dependency Injection

Améliorations des Performances des Animations

Nous avons mis à jour notre implémentation d’Animations pour ne plus avoir besoin des animations web polyfill. Cela signifie que vous pouvez supprimer ce polyfill de votre application et économiser environ 47 Ko de taille de bundle tout en augmentant les performances des animations dans Safari en même temps.

RxJS v6

Angulaire a été mis à jour pour utiliser v6 de RxJS. RxJS est un projet indépendant qui a lancé v6 il y a plusieurs semaines. RxJS v6 apporte avec lui plusieurs changements majeurs, avec un paquet de compatibilité descendante rxjs-compat qui gardera vos applications fonctionnelles.

RxJS a été réarrangé pour le rendre plus agile, garantissant que seuls les morceaux de RxJ que vous utilisez sont inclus dans vos bundles de production.

Si vous utilisez ng update, votre application devrait continuer à fonctionner, mais vous pouvez en apprendre plus sur la migration de 5.5 à 6.0.

Support à long terme (LTS)

Nous étendons notre support à long terme à toutes les versions majeures.

Nous avions précédemment annoncé que seules les versions 4 et 6 seraient des versions LTS, mais afin de faciliter la mise à jour d’une version majeure et de donner plus de temps aux projets plus importants pour planifier les mises à jour, nous avons décidé d’étendre le support à long terme. à partir de v4.

Chaque version majeure sera soutenue pendant 18 mois avec environ 6 mois de développement actif suivis de 12 mois de corrections de bugs critiques et de correctifs de sécurité.

En savoir plus sur Les Versions Angular et leur sortie.

Comment mettre à jour à la version 6.0.0

Visitez update.angular.io pour des informations et des conseils sur la mise à jour de votre application.

La mise à jour suit généralement 3 étapes et profitera du nouvel outil de mise à jour ng update.

1. Mettez à jour @angular/cli
2. Mettez à jour vos paquets de framework Angular
3. Mettre à jour d’autres dépendances

Il est extrêmement important pour les développeurs de rester à jour avec les dernières versions, alors laissez-nous savoir ce que vous pensez de cette version dans les commentaires!

Qu’en est-il à propos d’Ivy?

À ng-conf, nous avons mentionné une nouvelle initiative appelée Ivy — notre pipeline de rendu de nouvelle génération. Ivy est actuellement en développement actif et ne fait pas partie de la version 6.0. Nous annoncerons un aperçu opt-in de Ivy dès qu’il sera prêt dans les prochains mois. Gardez un oeil sur ce blog pour les dernières informations.

Source: Je vous ai traduit fidèlement cet article en français depuis sa version Anglaise “Version 6 of Angular Now Available”