From 935f3a81495957982cbdf3de5320c8725eff59f5 Mon Sep 17 00:00:00 2001 From: aminesbdev Date: Fri, 24 Apr 2026 11:51:52 +0000 Subject: [PATCH 1/2] docs(docs-infra): add environment runtime configuration Add a new reference explaining Angular environment configuration strategies, including both build-time and runtime approaches. Register the reference in SKILL.md so it is discoverable by the skill system. --- skills/dev-skills/angular-developer/SKILL.md | 1 + .../references/environment-configuration.md | 132 ++++++++++++++++++ 2 files changed, 133 insertions(+) create mode 100644 skills/dev-skills/angular-developer/references/environment-configuration.md diff --git a/skills/dev-skills/angular-developer/SKILL.md b/skills/dev-skills/angular-developer/SKILL.md index f332e3e0878f..86f699753d0d 100644 --- a/skills/dev-skills/angular-developer/SKILL.md +++ b/skills/dev-skills/angular-developer/SKILL.md @@ -128,3 +128,4 @@ When working with Angular tooling, consult the following references: - **Angular CLI**: Creating applications, generating code (components, routes, services), serving, and building. Read [cli.md](references/cli.md) - **Code Modernization**: Automatically refactoring to modern standards using migrations. Read [migrations.md](references/migrations.md) - **Angular MCP Server**: Available tools, configuration, and experimental features. Read [mcp.md](references/mcp.md) +- **Environment Configuration**: Strategies for build-time and runtime configuration. Read [environment-configuration.md](references/environment-configuration.md) diff --git a/skills/dev-skills/angular-developer/references/environment-configuration.md b/skills/dev-skills/angular-developer/references/environment-configuration.md new file mode 100644 index 000000000000..51fa825a7099 --- /dev/null +++ b/skills/dev-skills/angular-developer/references/environment-configuration.md @@ -0,0 +1,132 @@ +# Environment configuration + +## Configuration strategies + +Angular supports two main configuration strategies: + +- **Build-time configuration** using environment files +- **Runtime configuration** by loading values at application startup + +Choose the approach based on your deployment requirements. + +--- + +## Build-time configuration + +Environment files define configuration values that are replaced at build time. + +> **Security note:** Environment files are bundled into the client-side application. +> They are visible to anyone who can load the page. +> Never store sensitive information like API keys, secrets, or credentials in environment files. +> These values can be easily accessed by users. + +Generate environment files using the CLI: + +```bash +ng generate environments +``` + +This creates environment-specific files such as: + +```ts +// environment.ts (production) +export const environment = { + production: true, + apiUrl: 'https://api.example.com', +}; +``` + +```ts +// environment.development.ts +export const environment = { + production: false, + apiUrl: 'http://localhost:3000', +}; +``` + +Import the environment where needed: + +```ts +import { environment } from '../environments/environment'; + +const apiUrl = environment.apiUrl; +``` + +The Angular CLI replaces the appropriate file based on the build configuration. + +> Changes to environment files require rebuilding the application. + +--- + +## Runtime configuration (advanced) + +In some scenarios, applications need to load configuration at runtime instead of build time. + +This allows the same build artifact to be deployed across multiple environments without rebuilding. + +A common approach is to load a JSON configuration file from the `assets` folder during application +initialization. + +### Example + +```json +// src/assets/config.json +{ + "apiUrl": "https://api.example.com" +} +``` + +Load the configuration before the application starts: + +```ts +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +@Injectable({ providedIn: 'root' }) +export class AppConfigService { + private config!: { apiUrl: string }; + + private readonly http = inject(HttpClient); + + loadConfig() { + return this.http.get('/assets/config.json').pipe( + tap(data => { + this.config = data; + }) + ); + } + + get apiUrl(): string { + return this.config.apiUrl; + } +} +``` + +Register the loader during application bootstrap: + +```ts +import { provideAppInitializer, inject } from '@angular/core'; + +provideAppInitializer(() => { + const config = inject(AppConfigService); + return config.loadConfig(); +}); +``` + +This ensures configuration is available before the application renders. + +> Runtime configuration is an advanced pattern and is not required for most applications. + +--- + +## Choosing a strategy + +| Criteria | Build-time | Runtime | +|----------|-----------|---------| +| Change without rebuild | No | Yes | +| Startup performance | Faster | Slight delay | +| Complexity | Low | Moderate | +| Deployment flexibility | Limited | High | + +Use build-time configuration for most applications, and runtime configuration when you need to +deploy the same build across multiple environments. From ee25bb160f315ecf6fe16c1f9e92384d0bdca419 Mon Sep 17 00:00:00 2001 From: aminesbdev Date: Thu, 4 Jun 2026 06:48:16 +0000 Subject: [PATCH 2/2] docs(docs-infra): update environment configuration examples and remove production flag --- .../references/environment-configuration.md | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/skills/dev-skills/angular-developer/references/environment-configuration.md b/skills/dev-skills/angular-developer/references/environment-configuration.md index 51fa825a7099..311e935c78ac 100644 --- a/skills/dev-skills/angular-developer/references/environment-configuration.md +++ b/skills/dev-skills/angular-developer/references/environment-configuration.md @@ -29,9 +29,8 @@ ng generate environments This creates environment-specific files such as: ```ts -// environment.ts (production) +// environment.ts export const environment = { - production: true, apiUrl: 'https://api.example.com', }; ``` @@ -39,7 +38,6 @@ export const environment = { ```ts // environment.development.ts export const environment = { - production: false, apiUrl: 'http://localhost:3000', }; ``` @@ -47,13 +45,15 @@ export const environment = { Import the environment where needed: ```ts -import { environment } from '../environments/environment'; +import {environment} from '../environments/environment'; const apiUrl = environment.apiUrl; ``` The Angular CLI replaces the appropriate file based on the build configuration. +If you need a development-mode check, use `isDevMode()` from `@angular/core` instead of relying on a manually maintained `production` flag. + > Changes to environment files require rebuilding the application. --- @@ -79,20 +79,20 @@ initialization. Load the configuration before the application starts: ```ts -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import {Service, inject} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; -@Injectable({ providedIn: 'root' }) +@Service() export class AppConfigService { - private config!: { apiUrl: string }; + private config!: {apiUrl: string}; private readonly http = inject(HttpClient); loadConfig() { return this.http.get('/assets/config.json').pipe( - tap(data => { + tap((data) => { this.config = data; - }) + }), ); } @@ -105,7 +105,7 @@ export class AppConfigService { Register the loader during application bootstrap: ```ts -import { provideAppInitializer, inject } from '@angular/core'; +import {provideAppInitializer, inject} from '@angular/core'; provideAppInitializer(() => { const config = inject(AppConfigService); @@ -121,12 +121,12 @@ This ensures configuration is available before the application renders. ## Choosing a strategy -| Criteria | Build-time | Runtime | -|----------|-----------|---------| -| Change without rebuild | No | Yes | -| Startup performance | Faster | Slight delay | -| Complexity | Low | Moderate | -| Deployment flexibility | Limited | High | +| Criteria | Build-time | Runtime | +| ---------------------- | ---------- | ------------ | +| Change without rebuild | No | Yes | +| Startup performance | Faster | Slight delay | +| Complexity | Low | Moderate | +| Deployment flexibility | Limited | High | Use build-time configuration for most applications, and runtime configuration when you need to deploy the same build across multiple environments.