Environment-Specific Configuration for Angular Applications

add-envs-angular.json

"configurations": {
  "production": {
    // ...
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },
  "development": {
    // ...
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.dev.ts"
      }
    ]
  },
  "local": {
    // same properties like "sourceMap" and "optimization" from development
  }
}

add-injection-token.ts

export const MY_API_BASE = new InjectionToken<string>("My API Address");

@Injectable({ providedIn: "root" })
export class MyApiService {
  constructor(
    private http: HttpClient,
    @Inject(MY_API_BASE) private apiAddress: string
  ) {}

  getFoo(): Observable<any> {
    return this.http.get(`${this.apiAddress}/foo`);
  }
}

app-environment.model.ts

// app-environment.model.ts

/** A configuration object with environment-specific properties. */
export interface AppEnvironment {

  /** True if the @angular/core enableProdMode should be called. */
  production: boolean;

  /** The api server address. */
  apiAddress: string;
}

app-module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MY_API_BASE } from './my-api.service';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule ],
  providers: [
    { provide: MY_API_BASE, useValue: environment.apiAddress }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

environment.local.ts

// environment.local.ts
export const environment: AppEnvironment = {
  production: false,
  apiAddress: "http://localhost:7071",
};

my-api.service.ts

import { environment } from "../../environments/environment";

@Injectable({ providedIn: "root" })
export class MyApiService {
  constructor(private http: HttpClient) {}

  getFoo(): Observable<any> {
    return this.http.get(`${environment.apiAddress}/foo`);
  }
}

serve-angular.json

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "demo-angular-env-config:build:production"
    },
    "development": {
      "browserTarget": "demo-angular-env-config:build:development"
    },
    "local": {
      "browserTarget": "demo-angular-env-config:build:local"
    }
  },
  "defaultConfiguration": "local"
}

starting-angular-json-file-replacements.json

// architect.build.configurations.production
"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
]

starting-environment.ts

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false
};

starting-folder-structure.txt

src/
├── app/
├── assets/
├── environments/
│   ├── environment.prod.ts
│   └── environment.ts
├── ...
└── test.ts