Development build produces source map files whereas production builds not. Source map files help us easily debug our application even after the files are compressed and compiled.
To build your application for production, use the build command. By default, this command uses the production build configuration. This command creates a dist folder in the application root directory with all the files that a hosting service needs for serving your application.
isDevModelinkReturns whether Angular is in development mode. After called once, the value is locked and won't change any more.
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
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') {
//
}
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.
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
});
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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With