How To Disable And Enabling Production Mode In Angular?

In Angular, running an application in production mode is important for optimizing performance and minimizing bundle sizes. Understanding how to switch between production and development modes is essential for Angular developers. This article will explain how to enable and disable production mode in Angular and the effects of doing so.

What is the Production Mode in Angular?

Production Mode in Angular refers to a mode of the application optimized for deployment in a live environment. It differs from the Development Mode in several key ways:

• Optimizations: Production mode enables several performance optimizations, such as Ahead-of-Time (AOT) compilation, minification, and tree-shaking.
• Error Reporting: The development mode includes more detailed error messages and warnings, which are disabled in production mode to enhance performance.
• Change Detection: Angular performs additional checks in development mode to help catch common mistakes. These checks are disabled in production mode to improve runtime efficiency.

By default, Angular applications run in development mode unless explicitly configured otherwise.

There are several ways to switch between development and production modes in Angular, depending on how the application is being built and deployed.

Option 1: Enabling Production Mode through Angular CLI

The simplest and most common way to enable production mode in Angular is by using the Angular CLI during the build process. The Angular CLI has built-in support for switching between development and production configurations.

Step 1: Build for Production

To enable production mode, use the --prod flag when building your Angular application. This flag automatically configures the application for production, enabling AOT compilation, minification, and other optimizations.

ng build --prod

When you use this command, the following optimizations are automatically applied:

• Ahead-of-Time (AOT) Compilation: Pre-compiles templates and components during the build process.
• Minification: Reduces the size of JavaScript files by removing unnecessary characters.
• Tree Shaking: Eliminates unused code from the final bundle.
• Disable Development Mode: Production mode disables development-specific error checking and assertions, such as console warnings and Angular’s development mode warnings.

You can now deploy the generated files from the dist/ folder to your production environment.

Step 2: Running Angular in Development Mode

To run the application in development mode, simply omit the --prod flag when running or building the application. Development mode will remain enabled.

ng serve

or

ng build

In development mode, Angular includes additional checks and logs that help during the development process. It also provides more verbose error messages to assist with debugging.

Option 2: Manually Enabling Production Mode in Code

In certain scenarios, you may want to explicitly enable production mode in your code, especially if you need to toggle between environments or dynamically manage production mode.

Step 1: Import the enableProdMode Function

To manually enable production mode in your Angular application, import the enableProdMode function from the @angular/core module in your main.ts file.

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

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

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

Step 2: Set the Production Environment Variable

The enableProdMode function is typically called based on the value of the production variable in the environment configuration file. This variable is defined in the src/environments/environment.ts file for development and in src/environments/environment.prod.ts for production.

In the environment.ts file (development environment):

export const environment = {
    production: false,
};

In the environment.prod.ts file (production environment):

export const environment = {
    production: true,
};

The environment.production variable is automatically set to true or false based on the environment, allowing Angular to conditionally enable production mode. When you run ng build --prod, Angular automatically replaces environment.ts with environment.prod.ts.

Option 3: Modifying the Angular JSON Configuration

Another way to control production and development builds is through the angular.json configuration file. This file defines the default build configurations for different environments.

Step 1: Modify the Angular Configuration

In the angular.json file, locate the configurations section under the build and serve options.

{
    "projects": {
        "your-app-name": {
            "architect": {
                "build": {
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true
                        }
                    }
                },
                "serve": {
                    "configurations": {
                        "production": {
                            "browserTarget": "your-app-name:build:production"
                        }
                    }
                }
            }
        }
    }
}

When you run ng build --prod or ng serve --configuration=production, Angular uses this configuration to apply production mode optimizations.

Option 4: Toggling Production Mode in Runtime

In some advanced cases, you might want to toggle between development and production modes dynamically at runtime. However, this approach is uncommon and typically avoided in production applications because enabling/disabling production mode is expected to be a build-time decision.

Verifying Production Mode

Once production mode is enabled, you can verify whether your application is running in production mode by using the following snippet in the browser console:

console.log(isDevMode());

If isDevMode() returns false, the application is running in production mode. If it returns true, the application is in development mode.

Effects of Enabling Production Mode

1. Performance Improvements: Production mode significantly improves performance by disabling Angular’s development-specific error-checking mechanisms and enabling optimizations such as tree shaking and AOT compilation.
2. Error Messages: Angular suppresses error messages that are only useful in a development environment. This includes assertions and console warnings.
3. Bundle Size: Enabling production mode reduces the size of the final build output by removing unused code and minifying the JavaScript and CSS files.
4. Change Detection: In development mode, Angular performs additional checks during change detection to help identify potential errors. These checks are disabled in production mode to speed up the application.