What are Angular environment files?

Angular environment files allow you to define configuration variables that vary depending on the target environment, such as development, production, or staging. This mechanism helps manage different settings for your application without modifying the core code during deployment.

Understanding Angular Environment Files

In Angular applications, environment files are crucial for managing configuration settings that differ across various deployment environments. For instance, you might have different API endpoints for development versus production, or enable/disable certain features based on the environment. These files provide a structured way to handle such variations efficiently.

Purpose and Key Use Cases

• API Endpoints: Defining different backend API URLs for development, staging, and production environments.
• Feature Flags: Toggling specific features on or off depending on the environment.
• Logging Levels: Setting different verbosity levels for console logs.
• Third-Party Keys: Managing API keys or credentials for external services (though highly sensitive keys should ideally be kept out of the client-side bundle).
• Build Configurations: Storing any other variables that need to be determined at build time.

Typical Structure

By default, an Angular CLI project generates two main environment files in the src/environments/ directory: environment.ts for development and environment.prod.ts for production.

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
  debugMode: true,
  featureFlags: {
    betaFeature: false
  }
};

export const environment = {
  production: true,
  apiUrl: 'https://api.yourdomain.com/api',
  debugMode: false,
  featureFlags: {
    betaFeature: true
  }
};

How Angular Uses Them

When you build your Angular application, the Angular CLI references the angular.json configuration file to determine which environment file to use. The fileReplacements array within the build or serve options specifies how to swap the default environment.ts with an environment-specific file during the build process.

For example, when running ng build --configuration=production or ng serve --configuration=production, the CLI replaces src/environments/environment.ts with src/environments/environment.prod.ts.

{
  "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,
              "namedChunks": false
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          }
        }
      }
    }
  }
}

Best Practices

• Avoid Sensitive Information: Never store highly sensitive data (like database credentials, private API keys) directly in environment files, as they are bundled into the client-side application. Use server-side environment variables or secure configuration services for such data.
• Define a Clear Interface: Ensure consistency by defining an interface for your environment object to catch missing properties at compile time.
• Use for Build-Time Configuration: Environment files are best suited for configurations that are known and static at build time.
• Version Control: Keep environment files under version control, but be mindful of any non-public data you might temporarily add.
• Extend for More Environments: You can create additional environment files (e.g., environment.staging.ts) and configure them in angular.json for more specific deployment scenarios.