Comprehensive Guide to Environment Configuration in Angular 6: Migrating from --env to --configuration

Major Changes in Angular 6 Environment Configuration System

During the Angular 6 upgrade process, the environment configuration system underwent significant restructuring. The --env parameter used in Angular 5.2 and earlier versions has been deprecated and replaced by a more flexible and powerful --configuration system. This change not only affects command-line parameter usage but also redefines the overall architecture of environment management.

New Configuration Parameter Usage Methods

In Angular 6, the correct command format for setting specific environments is:

ng serve --configuration=local

Or using the shorthand form:

ng serve -c local

This new parameter naming convention also applies to ng build and ng serve commands, ensuring configuration system consistency throughout the development workflow.

In-Depth Analysis of angular.json Configuration File

Angular 6 introduces a more granular configuration control mechanism. In the angular.json file, developers can define specific build options for each configuration environment:

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

This configuration structure allows developers to customize compilation options for different environments, including critical build parameters such as code optimization, source map generation, and AOT compilation.

Core Principles of File Replacement Mechanism

Environment file replacement is the core functionality of Angular's configuration system. The fileReplacements array defines file mappings that need to be replaced during the build process. When executing a specific configuration, the build system automatically replaces base environment files with specialized files for the corresponding environment, ensuring the correct environment configuration is loaded at runtime.

Complete Process for Adding New Environments

To add new environment configurations to a project, follow these steps:

Step 1: Add New Environment to Build Configuration

First, add a new configuration item to the configurations in the build section:

"build": {
  "configurations": {
    "dev2": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.dev2.ts"
        }
      ],
      "serviceWorker": true
    }
  }
}

Step 2: Configure Serve Task

Next, add the corresponding configuration in the serve section, pointing to the build configuration just defined:

"serve": {
  "configurations": {
    "dev2": {
      "browserTarget": "projectName:build:dev2"
    }
  }
}

Step 3: Use the New Configuration

After completing the configuration, use the new environment configuration with the following command:

ng serve -c dev2

This will automatically load the environment.dev2.ts file as the current runtime environment.

Extensibility Advantages of the Configuration System

The new configuration system not only supports environment file replacement but can also define other build parameters, such as:

• AOT (Ahead-of-Time) compilation settings
• Code optimization options
• Source map generation strategies
• CSS extraction configuration
• Service worker integration

This design enables developers to create completely independent build configurations for different environments, significantly improving project maintainability and deployment flexibility.

Migration Recommendations and Best Practices

For projects upgrading from Angular 5.2, we recommend:

1. Gradually migrate existing environment configurations to the new angular.json structure
2. Maintain naming consistency for environment configuration files
3. Define complete build parameter sets for each environment
4. Establish unified configuration management standards within the team

By following these best practices, you can ensure the stability and maintainability of environment configurations, laying a solid foundation for future Angular version upgrades.