Encore un autre article angulaire, configurations et environnements de pièces

Dans mon article précédent, nous avons appris comment générer un composant. Avant d'aller plus loin, je pense que nous devrions examiner diverses notions sur les configurations et les environnements.

Il existe différents types de configuration : comportement angulaire et compilateur dactylographié. Aujourd'hui, nous allons jeter un œil à la partie Angular, et tout est dans le projet angulaire.json.

Ce fichier décrit tout votre projet, et suit un schéma de Angular CLI : /@angular/cli/lib/config/schema.json

Les « projets » constituent la partie principale. Et dans celui-ci, vous verrez « schémas » et « architecte ».

L'architecte décrit les comportements de la CLI : build, serve, test, …

Les schémas décrivent comment générer du code. Et c'est ce que nous allons faire aujourd'hui.

Voici le mien après le premier article :

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

Nous pouvons voir qu'il contient « scss » pour la clé de style. En effet, lorsque j'ai créé le projet, j'ai répondu « scss » à l'invite cli.

Mais je veux faire plus. Habituellement, je préfère créer un composant avec un modèle de composant de fichier unique. C'est comme le fait VueJS. Vos styles, code HTML et dactylographié dans un seul fichier. C'est parce que cela vous oblige à construire peu de composants.
Pour ce faire, ajoutez ces lignes : inlineStyle et inlineTemplate

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

Maintenant, lorsque vous exécuterez ng generate composant my-new-component, il créera uniquement le fichier dactylographié.

Nous allons continuer avec quelques optimisations. Les meilleures pratiques expliquent que vous devez toujours définir votre détection des modifications sur « OnPush ». Cela devrait donc être fait lors de la génération des composants.
Pour cela, ajoutez cette ligne : changeDetection

"@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true,
    "changeDetection": "OnPush"
  }
},

Ça y est, vous avez maintenant configuré votre génération de code de projet par défaut.

Dans la version précédente d'Angular, vous pouviez définir « autonome : vrai ». Mais c'est désormais le comportement par défaut.

Je terminerai par le concept Environnement. Lorsque vous créez une application, vous dépendez généralement des API. Ces API peuvent être servies localement (sur votre ordinateur lorsque vous écrivez du code), mais peuvent être servies par un serveur de test, un serveur de pré-production ou un serveur de production.
Vous devez donc définir le nom d'hôte dans une variable.

Angular apporte une solution aimable pour cela : l'environnement.

ng générer des environnements

Cette commande ajoutera 2 nouveaux fichiers dans votre projet : Environment.ts et Environment.development.ts
Et il modifiera également votre angulaire.json en ajoutant un tableau 'fileReplacements' dans le nœud 'projects.my-new-project.architect.configurations.development'

Pendant le processus de construction, il remplace le fichier Environment.ts requis par le fichier d'environnement requis (environment.development.ts par exemple).

Vous pouvez stocker toutes les variables d'environnement spécifiques à l'intérieur et importer les environnements partout où vous en avez besoin. Mais attention à ne pas importer d'autres environnement.*.ts car ils ne seront pas disponibles au moment de l'exécution !

Voici un échantillon d'environnement :

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

Il vous suffit donc de créer un nouveau « environment.production.ts » avec les variables requises à l'intérieur. Ensuite, modifiez le fichier angulaire.json pour ajouter la section fileReplacements sous « project.architect.configurations.production » comme ceci :

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

À mon avis, Angular aurait dû créer à la fois des fichiers de développement et de production. C'est un peu étrange.

Ho, j'ai oublié de dire que dans Angular v19, vous pouvez définir une variable globale au démarrage. Cela pourrait être une alternative au concept d'environnement, mais cela nécessite plus de configuration lors du processus de construction.

Bonne journée ☁️

[note] Tous les articles utilisent la commande d'Angular v19*

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!