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

Question

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?

Algonquian

Answer 1

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

• https://github.com/angular/angular/blob/2.0.0/modules/%40angular/core/src/application_ref.ts#L58

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') {
  //
}

Delict

I'm getting the same error you mentioned. "Cannot enable prod mode after platform setup". Could you please help me in getting this resolved? @Delict – Hasten

@Hasten You have to enable it before calling platformBrowserDynamic().bootstrapModule(AppModule); – Delict

That is exactly how I'm calling it. Still I'm getting this error every time I try running the app in production mode @yurzui. Any help resolving this would be much appreciated. Thanks – Hasten

@Hasten Do you have any example to reproduce it? – Delict

This is my "main.ts" import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { Splashscreen } from 'ionic-native'; import { AppModule } from './app.module'; import {enableProdMode} from 'angular2/core'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule); is it possible for you to resolve this in chatroom? Is this what you wanted? @Delict – Hasten

It works perfectly! I could separate between prod and dev projects in firebase with that method! – Darlenedarline

angular.io/api/core/isDevMode "After called once, the value is locked and won't change any more." The answer should include the doc and this warning! – Cerelly

Is there something similar for AngularJS? – Naughty

To improve readability in the console log, prepend some message to the boolean result that is getting logged. Else you only see true or false in the console, which might come from anything. Sample: console.log("Angular in Development mode: " + isDevMode()); – Handful

Answer 2

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.

Jeanene

This should be the accepted answer. (Proper doc linking and explanations.) – Cerelly

The fact that the value won't change doesn't imply that you don't want to call it. You shouldn't be switching from dev mode to prod mode and back while your application is running. So when you're trying to determine whether you should enable production mode, the environment variable is the right way to go, but if you have a service that needs to behave a little differently when in dev mode, isDevMode() is a perfectly fine way to accomplish that. – Nozzle

I don't think this is still valid. New Angular versions don't even generate an env automatically, and if you generate it through schematics it won't have a production property – Patronage

Answer 3

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
}

Wilkins

Answer 4

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
});

Bestow

I was actually looking for both. I am using webpack (through the angular-cli), where do I add your lines of code? How do I have access to that variable in my typescript files? I would be great if you could update your answer with that – Algonquian

Following this ngcli.github.io/#getting-started-project-structure you should edit the webpack.config.js then follow the link in my answer... – Bestow

The link in your post is outdated, heres the correct one for the Define Plugin – Perpend

Answer 5

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);

Cloakroom

Interestingly, my new Angular 9 app seems to have put these lines (in this order!) into my "main.ts" file already. It seems to be the default now. – Loudhailer

Answer 6

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.

Saberio

try to build you app with ng build --prod=true via angular cli – Ewold

if ( isDevMode ) only checks if the identifier isDevMode is defined, not null, and not empty nor zero. As the identifier was defined in @angular/core that if() will always return true. Now, if( isDevMode() ) will actually call the function and it will return if it's development environment or not. – Unmoor

Answer 7

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

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

Nowadays

where to put this file, and how to change the value of env? – Rapid