Вы можете создавать / поддерживать файлы конфигурации JS в папке app/assets:
assets / config. js
(function(window) {
window.config = {
__API_BASE_URL__: 'http://server1/api',
__APP_BASE_HREF__: '/production/'
};
})(window);
Тогда bootstrap файл конфигурации для переопределения API_BASE_URL и API_BASE_HREF:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, InjectionToken } from '@angular/core';
import { AppComponent } from './app.component';
import { APP_BASE_HREF } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL');
declare var config: any;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
{ provide: API_BASE_URL, useValue: config['__API_BASE_URL__'] },
{ provide: APP_BASE_HREF, useValue: config['__APP_BASE_HREF__'] }
],
bootstrap: [AppComponent]
})
export class AppModule { }
При вызове служб добавьте базовый URL-адрес API (если он существует) ):
import { Component, Inject, Optional } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { API_BASE_URL } from './app.module';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app23';
http: HttpClient;
baseUrl: string;
constructor(@Inject(HttpClient) http: HttpClient, @Optional() @Inject(API_BASE_URL) baseUrl?: string) {
this.http = http;
this.baseUrl = baseUrl ? baseUrl : '';
this.http.get(`${baseUrl}users`).subscribe(t => {
...
});
}
}
Внесите необходимые изменения в index. html, чтобы он загружал config.js как можно раньше:
index. html
<!doctype html>
<html lang="en">
<head>
<base href="/">
<script src="assets/config.js"></script>
<meta charset="utf-8">
<title>App23</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Сборка для производства (это скомпилирует модули и выведет в папку 'dist'):
ng build --prod
Наконец , в зависимости от среды, замените config. js в папке dist в качестве шага развертывания после сборки.