Maison> interface Web> js tutoriel> le corps du texte

Créer et servir des applications angulaires dans des environnements avec environnement.ts (Angular)

王林
Libérer: 2024-09-03 21:00:53
original
544 Les gens l'ont consulté

En tant que développeur Angular, déployer votre application dans différents environnements – développement (dev), tests d'acceptation utilisateur (UAT) et production – est un phénomène courant. Cependant, modifier constamment le code pour répondre aux spécificités de cet environnement peut être fastidieux, sujet aux erreurs et nuire à l'efficacité.

Cet article décrit une approche étape par étape pour créer et servir votre application Angular dans divers environnements sans modifier la base de code, en tirant parti de la puissante fonctionnalité Environment.ts.

Scénario:

Imaginez une application Angular où le frontend interagit avec les API backend hébergées sur différents environnements. Explorons comment créer de nouveaux environnements, les configurer et servir/construire votre application en fonction de l'environnement cible.

Configuration des environnements :

Générer des fichiers d'environnement :

Exécutez la commande suivante dans votre terminal :

ng générer des environnements

Cela crée un dossier nommé environnements dans le répertoire src, contenant un fichier environnement.ts initial. Par défaut, ce fichier sert de configuration de votre environnement de développement.

Building and Serving Angular Applications Across Environments with environment.ts (Angular )

Définition des variables d'environnement :

Ouvrez Environment.ts et définissez vos variables d'environnement de développement :

export const environment = { production: false, //Set to False for development apiUrl: 'http://my-dev-url' //Replace with your development URL };
Copier après la connexion

Création de fichiers spécifiques à l'environnement :

Pour les environnements UAT et Production, créez des fichiers séparés :

environnement.test.ts (pour UAT)
environnement.prod.ts (pour Production)

Ajoutez vos URL UAT et API de production respectives à ces fichiers :

// environment.test.ts (UAT) export const environment = { production: false, apiUrl: 'http://my-uat-url' }; // environment.prod.ts (Production) export const environment = { production: true, apiUrl: 'http://my-prod-url' };
Copier après la connexion

Utiliser des environnements dans le code :

Pour utiliser l'URL de l'API dans votre code :

Importer environnement.ts :

importer { environnement } depuis './environments/environment';

URL d'accès à l'API :

Dans votre service ou composant, injectez la variable d'environnement :

export class MyService { constructor() {} apiUrl = environment.apiUrl; }
Copier après la connexion

Configuration d'angular.json pour les builds spécifiques à l'environnement :

Configurations cibles :

Ouvrez angulaire.json et localisez la section « configurations » sous « build ». Ceci définit les configurations de build pour différents environnements.

"configurations": { "production": { // Rest of the configs "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] }, "staging": { // Rest of the configs "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.test.ts" } ] }, // ... other configurations }, "defaultConfiguration": "production"
Copier après la connexion

Cela demande à la CLI angulaire de remplacer l'environnement par défaut.ts par Environment.prod.ts lors des versions de production et Environment.test.ts pour les versions UAT.

Pour servir les applications sur plusieurs environnements, vous pouvez ajouter des configurations de service dans angulaire.json comme :

"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { … }, "configurations": { "development": { // Use the `development` configuration of the `build` target. "buildTarget": "my-app:build:development" }, "staging": { // Use the `development` configuration of the `build` target. "buildTarget": "my-app:build:staging" }, "production": { // Use the `production` configuration of the `build` target. "buildTarget": "my-app:build:production" } }, "defaultConfiguration": "development" },
Copier après la connexion

Construire et servir pour des environnements spécifiques :

Construire pour la production :

Pour créer votre application pour la production, utilisez :

ng build --configuration=production

Utiliser le nom de la configuration définie dans angulaire.json (production, staging dans notre scénario)

Servir pour l'UAT :

Pour servir votre candidature pour l'UAT, utilisez :

ng serve --configuration=staging

Conclusion

L'utilisation de configurations spécifiques à l'environnement améliore considérablement l'expérience du développeur. Il offre une approche propre et maintenable, rationalisant le déploiement d'applications dans divers environnements et réduisant finalement le délai moyen de production (MTTP).

De plus, si vous avez aimé lire cet article, vous pouvez en apprendre davantage sur moi ici.

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!