CODEWITHSUNDEEP
angularproduction
maxbellec
maxbellec

Reputation: 17451

How to check if Angular application running in Production or Development mode

This seems an easy one, but I couldn't find any solution.

So, how do I check if my app is running in production mode or dev mode?

Upvotes: 220

Views: 149149

Answers (7)

Germain Kataku
Germain Kataku

Reputation: 29

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

export const environment = {  
  apiURL: (env  === 'production') 
    ? 'https://example.com/api'
    : 'http://localhost:8080/api'
};

Upvotes: 1

yurzui
yurzui

Reputation: 214007

You can use this function isDevMode

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

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

One note: be carefull with this function

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

You will get

Error: Cannot enable prod mode after platform setup

Other options

environment variable

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

if (environment.production) {
  //
}

injected by webpack process.env.NODE_ENV variable

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

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

Upvotes: 338

DEEPAN KUMAR
DEEPAN KUMAR

Reputation: 174

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


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

This was my code, so I got the same error. I just interchanged line 3 and 4. Then the issue is fixed. So before bootstrapping module we should enable --prod mode.

The correct one can be put in this way,

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

Upvotes: 5

Jasmeet Singh
Jasmeet Singh

Reputation: 133

Simply check the production variable present in the environment file, it will be true for production mode and false for development.

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

if (environment.production) {
  // for production
} else {
  // for development
}

Upvotes: 10

Spikolynn
Spikolynn

Reputation: 4173

You should be careful that you check the return value of the isDevMode() function.

My setup was failing because i was checking for existence: if (isDevMode) was always true, even in production because i declared it with import { isDevMode } from '@angular/core';.

if (isDevMode()) returned false correctly.

Upvotes: 2

Ron DeSantis
Ron DeSantis

Reputation: 935

Per the Angular Deployment guide at https://angular.io/guide/deployment#enable-production-mode:

Building for production (or appending the --environment=prod flag) enables production mode Look at the CLI-generated main.ts to see how this works.

main.ts has the following:

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

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

So check environment.production to see if you are in production.

Most likely you do NOT want to call isDevMode(). Per the Angular API documentation at https://angular.io/api/core/isDevMode:

After called once, the value is locked and won't change any more... By default, this is true, unless a user calls enableProdMode before calling this.

I've found that calling isDevMode() from an ng build --prod build always returns true and always locks you into running in dev mode. Instead, check environment.production to see if you are in production. Then you will stay in production mode.

Upvotes: 65

Hitmands
Hitmands

Reputation: 14159

it depends on what you are asking...

If you want to know the mode of Angular, as @yurzui said, you need to call { isDevMode } from @angular/core but it can return false only if you call enableProdMode before it.

If you want to know the build environment, in other words, if your app is running minified or not, you need to set a build variable in your build system... Using Webpack, for example, you should have a look at definePlugin.

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

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

Upvotes: 6

Related Questions