Angular environment service

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

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

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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

Angular attribute setter

Пример задания значения булева Input свойства как директивы, на примере:

09 октября 2018 г. в Angular