Как управлять файлами конфигурации среды и целями

Когда вы создали angular приложение с помощью Angular CLI или Nrwl Nx tools у вас всегда есть папка с фалами конфигурации окружения:

<APP_FOLDER>/src/environments/                        └──environment.ts                        └──environment.prod.ts

Можно переименовать environment.prod.ts в environment.production.ts например, также можно создавать дополнительные файлы конфигурации такие как environment.qa.ts или environment.staging.ts.

<APP_FOLDER>/src/environments/                        └──environment.ts                        └──environment.prod.ts                        └──environment.qa.ts                        └──environment.staging.ts

Файл environment.ts используется по умолчанию. Для использования остальных файлов необходимо открыть angular.json и настроить fileReplacements секцию в build конфигурации и добавить блоки в serve и е2е конфигурации.

{    "architect":{       "build":{          "configurations":{             "production":{                "fileReplacements":[                   {                      "replace":"<APP_FOLDER>/src/environments/environment.ts",                      "with":"<APP_FOLDER>/src/environments/environment.production.ts"                   }                ]             },             "staging":{                "fileReplacements":[                   {                      "replace":"<APP_FOLDER>/src/environments/environment.ts",                      "with":"<APP_FOLDER>/src/environments/environment.staging.ts"                   }                ]             }          }       },       "serve":{          "configurations":{             "production":{                "browserTarget":"app-name:build:production"             },             "staging":{                "browserTarget":"app-name:build:staging"             }          }       },       "e2e":{          "configurations":{             "production":{                "browserTarget":"app-name:serve:production"             },             "staging":{                "browserTarget":"app-name:serve:staging"             }          }       }    } }

Для сборки или запуска приложения с конкретным окрудением используйте команды:

ng build --configuration=staging ng start --configuration=staging ng e2e --configuration=staging  Кстати ng build --prod  всего лишь сокращенный вариант ng build --configuration=production

Не используйте environment файлы напрямую, только через DI

Использование глобальных переменных и прямых импортов нарушает ООП подход и усложняет тестируемость ваших классов. Поэтому лучше создать сервис который можно инжектить в ваши компоненты и другие сервисы. Вот пример такого сервиса с возможностью указывать дефолтное значение.

export const ENVIRONMENT = new InjectionToken<{ [key: string]: any }>('environment');  @Injectable({   providedIn: 'root', }) export class EnvironmentService {   private readonly environment: any;    // We need @Optional to be able start app without providing environment file   constructor(@Optional() @Inject(ENVIRONMENT) environment: any) {     this.environment = environment !== null ? environment : {};   }    getValue(key: string, defaultValue?: any): any {     return this.environment[key] || defaultValue;   } }  @NgModule({   imports: [     BrowserModule,     HttpClientModule,     AppRoutingModule,   ],   declarations: [     AppComponent,   ],   // We declare environment as provider to be able to easy test our service   providers: [{ provide: ENVIRONMENT, useValue: environment }],   bootstrap: [AppComponent], }) export class AppModule { }

Отделяйте конфигурацию окружения и бизнес логики

Конфигурация окружения включает в себя только свойства которые относятся к окружению, например apiUrl. В идеале конфигурация окружения должна состоять из двух свойств:

export const environment = {   production: true,   apiUrl: 'https://api.url', };

Также в этот конфиг можно добавить свойство для включения дебаг режима debugMode: true или можно добавить имя сервера на котором запущено приложение environmentName: ‘QA’, но не забывайте что это очень плохая практика если ваш код знает что-либо о сервере на котором он запущен.

Никогда не храните какую-либо секретную информацию или пароли в конфигурации окружения.

Другие настройки конфигурации такие как maxItemsOnPage или galleryAnimationSpeed должны храниться в другом месте и желательно использоваться через configuration.service.ts который может получать настройки с какого то эндпоинта или просто загружая config.json из папки assets.

1. Асинхронный подход (используйте когда конфигурация может измениться в рантайме)

// assets/config.json  {   "galleryAnimationSpeed": 5000 }  // configuration.service.ts  // ------------------------------------------------------  @Injectable({   providedIn: 'root', }) export class ConfigurationService {   private configurationSubject = new ReplaySubject<any>(1);    constructor(private httpClient: HttpClient) {     this.load();   }    // method can be used to refresh configuration   load(): void {     this.httpClient.get('/assets/config.json')       .pipe(         catchError(() => of(null)),         filter(Boolean),       )       .subscribe((configuration: any) => this.configurationSubject.next(configuration));   }    getValue(key: string, defaultValue?: any): Observable<any> {     return this.configurationSubject       .pipe(         map((configuration: any) => configuration[key] || defaultValue),       );   } }  // app.component.ts  // ------------------------------------------------------  @Component({   selector: 'app-root',   changeDetection: ChangeDetectionStrategy.OnPush,   templateUrl: './app.component.html',   styleUrls: ['./app.component.scss'] }) export class AppComponent {   galleryAnimationSpeed$: Observable<number>;    constructor(private configurationService: ConfigurationService) {     this.galleryAnimationSpeed$ = this.configurationService.getValue('galleryAnimationSpeed', 3000);      interval(10000).subscribe(() => this.configurationService.load());   } }

2. Синхронный подход (используйте когда конфигурация почти никогда не меняется)

// assets/config.json  {   "galleryAnimationSpeed": 5000 }  // configuration.service.ts  // ------------------------------------------------------  @Injectable({   providedIn: 'root', }) export class ConfigurationService {   private configuration = {};    constructor(private httpClient: HttpClient) {   }    load(): Observable<void> {     return this.httpClient.get('/assets/config.json')       .pipe(         tap((configuration: any) => this.configuration = configuration),         mapTo(undefined),       );   }    getValue(key: string, defaultValue?: any): any {     return this.configuration[key] || defaultValue;   } }  // app.module.ts  // ------------------------------------------------------  export function initApp(configurationService: ConfigurationService) {   return () => configurationService.load().toPromise(); }  @NgModule({   imports: [     BrowserModule,     HttpClientModule,     AppRoutingModule,   ],   declarations: [     AppComponent,   ],   providers: [     {       provide: APP_INITIALIZER,       useFactory: initApp,       multi: true,       deps: [ConfigurationService]     }   ],   bootstrap: [AppComponent], }) export class AppModule { }  // app.component.ts  // ------------------------------------------------------  @Component({   selector: 'app-root',   changeDetection: ChangeDetectionStrategy.OnPush,   templateUrl: './app.component.html',   styleUrls: ['./app.component.scss'] }) export class AppComponent {   galleryAnimationSpeed: number;    constructor(private configurationService: ConfigurationService) {     this.galleryAnimationSpeed = this.configurationService.getValue('galleryAnimationSpeed', 3000);   } }

Подменяйте environment переменные во время деплоя или в рантайме

Не создавайте отдельные сборки с разными конфигурациями, вместо этого используйте только одну продакшн сборку и подменяйте значения во время деплоя или во время исполнения кода. Есть несколько вариантов как сделать это:

Заменить значения плэйсхолдерами в environment файлах которые будут заменены в итоговой сборке во время деплоя

export const environment = {   production: true,   apiUrl: 'APPLICATION_API_URL', };

Во время деплоя строка APPLICATION_API_URL должна быть заменена на реальный адрес апи сервера.

Использовать глобальные переменные и инжектить конфиг файлы с помощью docker volumes

export const environment = {   production: true,   apiUrl: window.APPLICATION_API_URL, }; // in index.html before angular app bundles <script src="environment.js"></script>

Спасибо за внимание к статье, буду рад конструктивной критике и комментариям.

---

Также присоединяйтесь к нашему сообществу на Medium, Telegram или Twitter.