Angular environment service

Опубликовано в Angular • 26 января 2020 г. • 1 мин. на чтение

Имеется окружение. 

export interface Environment {
  production: boolean;
  version?: string;
  apiUrl?: string;
}

// src\environments\environment.ts
export const environment: Environment = {
  production: false,
  apiUrl: 'http://development.com/api/',
};

// src\environments\environment.prod.ts
export const environment: Environment = {
  production: true,
  apiUrl: 'https://production.com/api/'
};

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

  • Невозможно заменить без пересборки
  • Сложно тестировать
  • Сложно отделять конфигурацию от приложения

Не так давно я столкнулся с проблемой использования одного Environment для 2 приложений: настольное и мобильное приложение. Решением стало создание сервиса.

Реализация

В environment.ts добавляется токен

/**
 * Token for provide environment
 */
export const ENV_TOKEN = new InjectionToken<Environment>(
  'app.environment.token'
);

В app.module.ts добавляется провайдер окружения по токену

import { ENV_TOKEN, environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{
    provide: ENV_TOKEN,
    useFactory: () => environment
  }],
  bootstrap: [AppComponent]
})
export class AppModule {}

В каждом приложении будет свой environment, при необходимости он подменяется в нужных модулях/компонентах.

Использование

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  readonly url = this.environment.apiUrl;

  constructor(@Inject(ENV_TOKEN) private environment: Environment) {}
}

В качестве продолжения идеи можно забирать environment из window. How to use environment variables to configure your Angular application without a rebuild

Repo

Похожие записи