Comment définir l'environnement via `ng serve` dans Angular 6

169

J'essaie de mettre à jour mon application Angular 5.2 vers Angular 6. J'ai suivi avec succès les instructions du guide de mise à jour Angular (y compris la mise angular-clià jour de vers v6), et maintenant j'essaie de servir l'application via

ng serve --env=local

Mais cela me donne une erreur:

Option inconnue: '--env'

J'utilise plusieurs environnements ( dev/local/prod), et c'est ainsi que cela fonctionnait dans Angular 5.2. Comment puis-je définir l'environnement maintenant dans Angular 6?

Martin Adámek
la source
1
sa v6, vous mettez à jour angular-cliavec toute l'application, alors j'ai pensé que
c'était
5
Très utile, Martin. Merci de partager votre point de vue. En fait, ce n'est pas du tout évident.
Maxxx

Réponses:

303

Vous devez utiliser la nouvelle configurationoption (cela fonctionne aussi bien pour ng buildet ng serve)

ng serve --configuration=local

ou

ng serve -c local

Si vous regardez votre angular.jsonfichier, vous verrez que vous avez un contrôle plus fin sur les paramètres de chaque configuration (aot, optimiseur, fichiers d'environnement, ...)

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

Vous pouvez obtenir plus d'informations ici pour gérer les configurations spécifiques à l'environnement.

Comme indiqué dans l'autre réponse ci-dessous, si vous devez ajouter un nouvel «environnement», vous devez ajouter une nouvelle configuration à la tâche de génération et, en fonction de vos besoins, aux tâches de service et de test .

Ajouter un nouvel environnement

Modifier : pour que ce soit clair, les remplacements de fichiers doivent être spécifiés dans la buildsection. Donc, si vous souhaitez utiliser ng serveavec un environmentfichier spécifique (disons dev2 ), vous devez d'abord modifier la buildsection pour ajouter une nouvelle configuration dev2

"build": {
   "configurations": {
        "dev2": {

          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev2.ts"
            }
            /* You can add all other options here, such as aot, optimization, ... */
          ],
          "serviceWorker": true
        },

Puis modifiez votre servesection pour ajouter également une nouvelle configuration, en pointant vers la configuration dev2 que build vous venez de déclarer

"serve":
      "configurations": {
        "dev2": {
          "browserTarget": "projectName:build:dev2"
        }

Ensuite, vous pouvez utiliser ng serve -c dev2, qui utilisera le fichier de configuration dev2

David
la source
savez-vous s'il est possible d'ajouter également base-href dans les configurations? ou juste en ng build --c staging --base-href = / yyy /
Eduardo Tolino
@EduardoTolino: Oui, vous pouvez, il y a une baseHrefoption
David
Où puis-je spécifier le port de débogage distant pour l'environnement de développement? Afin de déboguer avec VSCode. Dans Angular 6bien sûr. Pour que la ng servecommande inclue le port du débogueur distant lors du lancement du Chromenavigateur.
Stephane
lien info mis à jour: github.com/angular/angular-cli/wiki/…
Mateo Tibaquira
1
ng serve -c local prend le temps de compiler l'application par rapport à "ng serve"
Vignesh
46

Cette réponse semble bonne.
cependant, cela m'a conduit à une erreur car il en résultait une
Configuration 'xyz' could not be found in project ...
erreur de construction.
Il est nécessaire non seulement de mettre à jour les configurations de construction , mais également d'en servir .

Alors juste pour ne laisser aucune confusion:

  1. --env n'est pas pris en charge dans angular 6
  2. --envs'est changé en --configuration|| -c(et est maintenant plus puissant)
  3. pour gérer divers envs, en plus d'ajouter un nouveau fichier d'environnement, il est maintenant nécessaire de faire quelques changements dans le angular.jsonfichier:
    • ajouter une nouvelle configuration dans la propriété build { ... "build": "configurations": ...
    • la nouvelle configuration de construction peut ne contenir qu'une fileReplacementspartie, (mais plus d'options sont disponibles)
    • ajouter une nouvelle configuration dans la propriété serve { ... "serve": "configurations": ...
    • la nouvelle configuration de service doit contenirbrowserTarget="your-project-name:build:staging"
garfunkel61
la source
8

Tu peux essayer: ng serve --configuration=dev/prod

Pour construire, utilisez: ng build --prod --configuration=dev

J'espère que vous utilisez un autre type d'environnement.

amku91
la source
ng serve --configuration = dev / prod commande prend du temps par rapport à ng serve pourquoi?
Vignesh
ng serve --configuration = prod prend plus de temps que ng serve --configuration = prod en raison de la minimisation du fichier et du code prêt pour la production.
amku91
ok si j'utilise la commande "ng serve --configuration = dev" signifie que cela prend également plus de temps
Vignesh le
Non, cela ne devrait pas prendre plus de temps. L'environnement de production comporte des étapes supplémentaires pour minimiser, uglifier et optimiser le code pour la production. Les autres environnements devraient prendre le temps normal, sauf si vous activez explicitement ces étapes supplémentaires.
Reginaldo Camargo Ribeiro
6

Pour Angular 2-5, reportez-vous à l'article Multiple Environment in angular

Pour l'utilisation angulaire 6 ng serve --configuration=dev

Remarque: Référez-vous également au même article pour angulaire 6. Mais où que vous trouviez à la --envplace, utilisez --configuration. Cela fonctionne bien pour angulaire 6.

Prasanth Venkatesan
la source
2

Vous pouvez utiliser la commande ng serve -c devpour l'environnement de développement ng serve -c prodpour l' environnement de production

tandis que la construction s'applique également. Vous pouvez utiliser ng build -c devpour la construction de développement

Shridhar Acharya
la source
2

Angular ne prend plus en charge --env à la place, vous devez utiliser

ng serve -c dev

pour l'environnement de développement et,

ng serve -c prod 

pour la production.

REMARQUE: -cou--configuration

Shilpa Soni
la source
Cela a été demandé et répondu il y a un an, votre réponse est également fausse, c'est -c(avec un seul tiret) ou --configuration(avec deux tirets).
Martin Adámek
0

Utilisez cette commande pour Angular 6 pour construire

ng build --prod --configuration=dev
Sateesh
la source