10 meilleures pratiques et conseils de pro lors de l’utilisation de la CLI angulaire

Les débutants comme les experts peuvent apprendre une chose ou deux sur les meilleures pratiques d’Angular CLI pour créer et gérer des projets Angular dans cet article de blog.

Si vous travaillez avec Angular, vous savez probablement à quel point Angular CLI est utile. Il simplifie le processus de création et de gestion de projets angulaires. Grâce à son interface de ligne de commande intuitive, il facilite la gestion de tâches même complexes telles que la génération de composants, de services, de canaux, de directives et bien plus encore.

Mais savez-vous comment utiliser efficacement Angular CLI ? Dans cet article, nous partagerons 10 bonnes pratiques et conseils de pro qui vous aideront à maîtriser Angular CLI. Ceux-ci sont basés sur notre propre expérience et la documentation officielle. Ils couvrent des sujets tels que la configuration, l’optimisation, la personnalisation et le débogage. Que vous soyez débutant ou expert, vous trouverez quelque chose d’utile dans cette liste. Alors plongeons-nous !

1. Commencez par l’essentiel

Lorsque vous démarrez un nouveau projet Angular avec le ng new commande, vous pouvez utiliser la --minimal flag pour créer un projet de démarrage minimal. Cela peut être utile si vous souhaitez repartir de zéro et inclure uniquement les fonctionnalités et dépendances dont vous avez besoin pour votre projet.

Pour utiliser ce drapeau, exécutez simplement la commande ng new my-project --minimaloù my-project est le nom de votre nouveau projet. Cela créera un nouveau projet Angular avec uniquement les fichiers et dépendances essentiels, vous permettant de construire votre projet à partir de zéro.

2. Gardez votre code propre et cohérent

ng lint est une commande qui vérifie votre code pour les erreurs et les problèmes de style selon les règles spécifiées dans le fichier tslint.json. Il vous aide à garder votre code propre et cohérent avec le guide de style Angular.

Par exemple, si vous disposez d’un fichier appelé app.component.ts avec le code suivant :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent {
  name = 'Angular';
}

Tu peux courir ng lint dans votre terminal et obtenez le résultat suivant :

Cela signifie que vous devez corriger le sélecteur et le modèle de votre composant pour suivre le guide de style angulaire. Vous pouvez aussi utiliser ng lint --fix pour corriger automatiquement certaines erreurs.

3. Améliorez vos feuilles de style avec Sass

Sass est un préprocesseur CSS qui vous permet d’écrire des feuilles de style plus concises et maintenables. Il ajoute des fonctionnalités telles que des variables, des mixins, l’imbrication, l’héritage et bien plus encore au CSS simple.

Pour utiliser Sass avec Angular CLI, vous devez :

• Créez un nouveau projet avec le --style=scss indicateur, qui indique à la CLI de générer des fichiers .scss au lieu de fichiers .css. Par exemple: ng new my-sassy-app --style=scss.
• Écrivez vos styles dans des fichiers .scss dans le dossier src. Vous pouvez utiliser n’importe quelle fonctionnalité Sass de votre choix, telle que les variables, les mixins, l’imbrication, etc. La CLI compilera automatiquement vos fichiers Sass en CSS lorsque vous exécutez ng serve ou ng build.
• Importez vos styles dans vos composants à l’aide du styleUrls propriété dans le décorateur de composants. Par exemple: @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }). Vous pouvez également utiliser le styles propriété pour écrire des styles en ligne dans la syntaxe Sass.

4. Optimisez votre code pour la production

ng build --prod est une commande utilisée dans Angular CLI pour créer une application Angular pour la production. Le --prod L’indicateur indique à la CLI d’utiliser la configuration de l’environnement de production et d’appliquer diverses optimisations au processus de construction.

Lors de la création pour la production, il est important de s’assurer que l’application est optimisée en termes de performances et de taille. Le ng build --prod La commande applique plusieurs optimisations telles que la minification, le tremblement d’arbre et la compilation Ahead-of-Time (AOT) pour réduire la taille de l’application et améliorer ses performances.

En utilisant ng build --prod est une bonne pratique lors du déploiement d’une application Angular dans un environnement de production. Il garantit que l’application est optimisée et prête à être utilisée par les utilisateurs finaux.

5. Utilisez ng generate pour gagner du temps et éviter les erreurs

ng generate est une commande utilisée dans Angular CLI pour générer de nouveaux fichiers et artefacts pour une application Angular. Il peut être utilisé pour générer une variété d’artefacts différents tels que des composants, des services, des directives et bien plus encore.

En utilisant ng generate est une bonne pratique lors de la création de nouveaux artefacts pour une application angulaire. Il garantit que les nouveaux fichiers sont créés au bon emplacement et suivent la structure et les conventions de dénomination recommandées.

6. Améliorez votre application en toute simplicité avec ng add

ng add est une commande de Angular CLI qui vous permet d’ajouter de nouvelles bibliothèques ou packages à votre application Angular. Il automatise le processus d’installation et de configuration, facilitant ainsi l’intégration de nouvelles fonctionnalités dans votre projet. En utilisant
ng add est une bonne pratique lors de l’ajout de nouvelles bibliothèques à une application Angular, car elle garantit que la bibliothèque est correctement installée et configurée correctement.

7. Travaillez plus rapidement et plus intelligemment grâce aux raccourcis

Il est toujours utile de connaître quelques raccourcis pour accélérer votre flux de travail. Par exemple, au lieu de taper ng generate componentvous pouvez simplement utiliser le raccourci ng g c pour générer rapidement un nouveau composant.

Voici quelques raccourcis plus utiles :

• ng g s: Raccourci pour ng generate serviceutilisé pour générer un nouveau service.
• ng g m: Raccourci pour ng generate moduleutilisé pour générer un nouveau module.
• ng g d: Raccourci pour ng generate directiveutilisé pour générer une nouvelle directive.
• ng g p: Raccourci pour ng generate pipeutilisé pour générer un nouveau tube.

Ces raccourcis peuvent vous faire gagner du temps et faciliter le travail avec Angular CLI.

8. Partagez votre code entre les projets

Lorsque vous travaillez avec Angular CLI, vous souhaiterez peut-être créer une nouvelle bibliothèque pour partager du code sur plusieurs projets au sein de votre espace de travail. Pour ce faire, vous pouvez utiliser le ng generate library commande. Cette commande crée un nouveau projet dans le projects/ dossier de votre espace de travail, dans lequel vous pouvez développer et publier une bibliothèque réutilisable. En utilisant ng generate libraryvous pouvez vous assurer que votre nouvelle bibliothèque est correctement configurée et respecte la structure et les conventions recommandées.

9. Stockez des informations sur le processus de création pour assurer le bon fonctionnement de votre application

Vous pouvez utiliser le ng build --stats-json commande pour créer un fichier appelé stats.json. Ce fichier contient de nombreuses informations utiles sur la construction de votre application, telles que la taille des bundles et leur contenu. Vous pouvez utiliser ce fichier avec des outils comme webpack-bundle-analyzer pour voir ce qui prend de la place dans votre application et trouver des moyens de la rendre plus petite et plus rapide. C’est un excellent moyen de garantir le bon fonctionnement de votre application !

10. Assurez-vous que votre code fonctionne comme prévu

Angular CLI fournit une commande ng test pour exécuter des tests unitaires dans un projet. Cette commande exécute le programme d’exécution de test Karma, qui est configuré avec le karma.conf.js fichier dans le répertoire racine du projet.

Par exemple, disons que nous avons un composant simple qui affiche un message :

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: '<h1>Hello, {{name}}!</h1>'
})
export class HelloComponent {
  name = 'World';
}

Nous pouvons écrire un test unitaire pour ce composant pour vérifier s’il affiche le bon message :

import { TestBed } from '@angular/core/testing';
import { HelloComponent } from './hello.component';

describe('HelloComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HelloComponent]
    });
  });

  it('should display the correct message', () => {
    const fixture = TestBed.createComponent(HelloComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Hello, World!');
  });
});

Sortir

En utilisant ng test est un excellent moyen de garantir que notre code fonctionne correctement et de détecter tout problème dès le début du développement.

Pour des options de tests unitaires plus robustes, consultez Progress Telerik JustMock.

Derniers mots

En conclusion, Angular CLI est un outil puissant qui peut aider les développeurs à rationaliser leur flux de travail et à optimiser leurs applications Angular. En suivant les meilleures pratiques et les conseils de pro décrits dans cet article, les développeurs peuvent tirer pleinement parti des fonctionnalités et des capacités d’Angular CLI pour créer des applications performantes et de haute qualité.

N’oubliez pas de toujours continuer à apprendre et à expérimenter de nouvelles techniques pour améliorer continuellement vos compétences et vos projets.