Angular изменение переменных для production?

Question

[Ghoulll]

Как изменить некие переменные для production'а? Есть адреса по которым я кидаю запросы, для локальной разработки, а для продакшена необходимо по другим адресам кидать запросы, как это сделать?

Comments

[Andrew]

А что мешает настроить сразу переменные для продакшена и сбилдить с ними?

[Антон Швец]

Если дефолтных возможностей по замене файлов в разных конфигурациях недостаточно, можно рассмотреть такой вариант
https://medium.com/@fidelisclayton/system-environm...
Но это не тот случай, если уж правда environent.ts недостаточно.

Answer 1

[Roman Khegay]

В помощь вам src\environments

Там есть environment.ts - он используется по-умолчанию
При сборке проекта:
ng build --prod
флажок --prod подставляется в маску *.environment.ts

В компонент импорится просто:

import { environment } from 'src/environments/environment';

export class AppComponent implements OnInit {
     url = environment.apiUrl;
}

Почитать более развернуто можно тут

Answer 2

[Владимир Коротенко]

base.service.ts

import { Observable } from 'rxjs/Rx';

export abstract class BaseService {

    protected readonly api = process.env.VUE_APP_API_ENDPOINT;

    protected handleError(error: any) {
    const applicationError = error.headers['Application-Error'];

    if (applicationError) {
        return Observable.throw(applicationError);
    }

    let modelStateErrors: any = '';

    if (error.data) {
        for (const key in error.data) {
            if (error.data[key]) {
              modelStateErrors += error.data[key] + '\n';
            }
          }
    }

    modelStateErrors = modelStateErrors = '' ? null : modelStateErrors;
    return Observable.throw(modelStateErrors || 'Server error');
  }
}

.env
VUE_APP_API_ENDPOINT = 'http://localhost:5000/api'
.env.production
VUE_APP_API_ENDPOINT ='/api'

Comments

[Антон Швец]

для этого есть интерцепторы.
А вообще трава у вас конечно улет, process не подставляется дефолтным сборщиком, надо кастомный билдер тащить.