Comment vérifier si une application angulaire s'exécute en mode production ou développement


131

Cela semble facile, mais je n'ai trouvé aucune solution.

Alors, comment vérifier si mon application fonctionne en mode production ou en mode développement?

Réponses:


199

Vous pouvez utiliser cette fonction isDevMode

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

...
export class AppComponent { 
  constructor() {
    console.log(isDevMode());
  }
}

Une note : soyez prudent avec cette fonction

if(isDevMode()) {
  enableProdMode();
}

Tu auras

Erreur: impossible d'activer le mode prod après la configuration de la plate-forme

Autres options

variable d'environnement

import { environment } from 'src/environments/environment';

if (environment.production) {
  //
}

injecté par la variable webpack process.env.NODE_ENV

declare let process: any;
const env = process.env.NODE_ENV;

if (env  === 'production') {
  //
}

J'obtiens la même erreur que vous avez mentionnée. "Impossible d'activer le mode prod après la configuration de la plate-forme". Pourriez-vous s'il vous plaît m'aider à résoudre ce problème? @yurzui
Gowtham

@Gowtham Vous devez l'activer avant d'appelerplatformBrowserDynamic().bootstrapModule(AppModule);
yurzui

C'est exactement comme ça que je l'appelle. J'obtiens toujours cette erreur chaque fois que j'essaye d'exécuter l'application en mode production @yurzui. Toute aide pour résoudre ce problème serait très appréciée. Merci
Gowtham

@Gowtham Avez-vous un exemple pour le reproduire?
yurzui

2
angular.io/api/core/isDevMode "Après avoir été appelée une fois, la valeur est verrouillée et ne changera plus." La réponse devrait inclure le doc et cet avertissement!
jasie

38

Selon le guide de déploiement angulaire à l' adresse https://angular.io/guide/deployment#enable-production-mode :

La construction pour la production (ou l'ajout de l'indicateur --environment = prod) active le mode de production Regardez la CLI générée main.tspour voir comment cela fonctionne.

main.ts a ce qui suit:

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

Vérifiez donc environment.productionsi vous êtes en production.

Vous ne souhaitez probablement PAS appeler isDevMode(). Selon la documentation de l'API Angular à l' adresse https://angular.io/api/core/isDevMode :

Après avoir été appelée une fois, la valeur est verrouillée et ne changera plus ... Par défaut, c'est vrai, sauf si un utilisateur appelle enableProdMode avant de l'appeler.

J'ai trouvé que l'appel à isDevMode()partir d'une ng build --prodconstruction renvoie toujours true et vous verrouille toujours dans l'exécution en mode dev. Vérifiez plutôt environment.productionsi vous êtes en production. Ensuite, vous resterez en mode production.


2
Cela devrait être la réponse acceptée. (
Liens

1
Le fait que la valeur ne change pas n'implique pas que vous ne vouliez pas l'appeler. Vous ne devriez pas passer du mode dev au mode prod et inversement pendant que votre application est en cours d'exécution. Ainsi, lorsque vous essayez de déterminer si vous devez activer le mode de production, la variable d'environnement est la bonne voie à suivre, mais si vous avez un service qui doit se comporter un peu différemment en mode de développement, isDevMode()c'est une manière parfaitement appropriée d'accomplir cette.
StriplingWarrior

4

cela dépend de ce que vous demandez ...

Si vous voulez connaître le modeof Angular, comme @yurzui l'a dit, vous devez appeler { isDevMode } from @angular/coremais il ne peut revenir falseque si vous appelez enableProdModeavant.

Si vous voulez connaître l' environnement de construction , en d'autres termes, si votre application est en cours d'exécution minifiée ou non, vous devez définir une variable de construction dans votre système de construction ... En utilisant Webpack, par exemple, vous devriez jeter un œil à definePlugin.

https://webpack.github.io/docs/list-of-plugins.html#defineplugin

new webpack.DefinePlugin({
  ENV_PRODUCTION: !!process.env.NODE_ENV
});

Je cherchais en fait les deux. J'utilise webpack (via angular-cli), où dois-je ajouter vos lignes de code? Comment ai-je accès à cette variable dans mes fichiers dactylographiés? Je serais bien si vous pouviez mettre à jour votre réponse avec cela
maxbellec

Suite à ce ngcli.github.io/#getting-started-project-structure, vous devez éditer le webpack.config.js puis suivre le lien dans ma réponse ...
Hitmands

Le lien dans votre message est obsolète, voici le bon pour le plug
in

2
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module'


platformBrowserDynamic().bootstrapModule(AppModule);
enableProdMode();

C'était mon code, donc j'ai eu la même erreur. Je viens d'échanger les lignes 3 et 4. Ensuite, le problème est résolu . Donc, avant de démarrer le module, nous devons activer le mode --prod.

Le bon peut être mis de cette façon,

enableProdMode()
platformBrowserDynamic().bootstrapModule(AppModule);

1
Fait intéressant, ma nouvelle application Angular 9 semble avoir déjà mis ces lignes (dans cet ordre!) Dans mon fichier "main.ts". Cela semble être la valeur par défaut maintenant.
Mike Gledhill le

1

Vous devez faire attention à vérifier la valeur de retour de la isDevMode()fonction.

Ma configuration échouait parce que je vérifiais l'existence: if (isDevMode)était toujours true, même en production parce que je l'ai déclarée avec import { isDevMode } from '@angular/core';.

if (isDevMode())renvoyé falsecorrectement.


essayez de créer votre application avec ng build --prod=truevia angular cli
Sathish Kumar kk

if ( isDevMode )vérifie uniquement si l'identificateur isDevMode est défini, non nul, ni vide ni nul. Comme l'identificateur a été défini @angular/core, if () retournera toujours true . Maintenant, if( isDevMode() )appellera réellement la fonction et elle retournera si c'est l'environnement de développement ou non.
WPomier

1

Vérifiez simplement la variable de production présente dans le fichier d'environnement, elle sera vraie pour le mode production et fausse pour le développement.

import { environment } from 'src/environments/environment';

if (environment.production) {
  // for production
} else {
  // for development
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.