嘗試在appSettings.json中設定環境變數-Angular和Typescript

我基本上是嘗試在 appSettings 中設定 API URL 路徑，這樣我就可以輕松地在 prod 和 dev 環境中來回更改。

這是我的 appSettings.json 檔案。apiURL 是我試圖設定和獲取的變數。

{
 "Logging": {
"LogLevel": {
  "Default": "Information",
  "Microsoft": "Warning",
  "Microsoft.Hosting.Lifetime": "Information"
}
  },
 "AllowedHosts": "*",
 "apiURL": "http://10.241.2.68:8132/api"
}

這是我的頁面，它試圖訪問我在 appSettings.json 中設定的環境變數。

import { Injectable } from '@angular/core';
// import { Defendant } from 'src/app/Models/Defendant';
import { Charge } from 'src/app/Models/Charge';
import { DefendantItem } from '../Models/DefendantItem';
import { Defendant_Charge } from '../Models/Defendant_Charge';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AppConfiguration } from "read-appsettings-json";  
@Injectable({
providedIn: 'root'
})
export class ChargeService {
//console.log(AppConfiguration.Setting().apiURL);
////////////////////////////////////////////////////////////////////
//  below is where I am trying to reference the environment variable
//  the entire program bombs and displays "GET \" on the page.
ChargeControllerUrl = AppConfiguration.Setting().apiURL   "/Charges";
//ChargeControllerUrl = "http://10.241.2.68:8132/api/Charges";
}

uj5u.com熱心網友回復：

如評論中所述，appsettings.json 不適用于角度應用程式。在這里，您可以通過本教程找到使用環境的必要步驟。以下是一些快速步驟：

import { environment } from './../environments/environment';
...
const baseUrl: string = environment.baseUrl;

environment.ts 可能看起來像

export const environment = {
  production: false,
  baseUrl: "http://localhost:45644/api/",
};

現場示例在這里

uj5u.com熱心網友回復：

我建議不要使用 environment.ts，因為這是一個構建時配置。

您實際尋找的是在運行時根據環境獲取 app-settings.json 檔案的某種方式。這意味著您可以打包您的代碼并通過您的環境推廣打包的代碼，而無需重新構建。

Angular 有一個叫做APP_INITIALIZER 的東西，你可以用它來實作這一點。

1. 在 assets/config 檔案夾中設定你的 app-settings.json (app-settings.qa.json, app-settings.prod.json)

2. 配置 AppConfigService 角度服務。

//app/services/app-config.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AppConfigService {

  private appConfig: any;
  private http : HttpClient;

  constructor(http: HttpClient) {
    this.http = http;
  }

  loadAppConfig() {
    return this.http.get('/assets/config/app-settings.json')
      .toPromise()
      .then(config => {
        this.appConfig = config;
      });
  }

  get apiBaseUrl() : string {
    return this.appConfig.apiBaseUrl;
  }
}

1. 使用 APP_INITIALIZER 作為 AppModule 中的注入令牌配置 AppService

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { AppConfigService } from './services/app-config/app-config.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide : APP_INITIALIZER,
      multi : true,
       deps : [AppConfigService],
       useFactory : (appConfigService : AppConfigService) =>  () => appConfigService.loadAppConfig()
    }

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

現在您可以使用此服務通過依賴注入獲取 baseURL

下面是一個示例服務，您的服務可能是什么樣的。注意建構式和 apiUrl 私有類變數

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { IempList } from '../interfaces/iemp-get-res';
import { map } from 'rxjs/operators';
import { AppConfigService } from 'src/app/services/app-config/app-config.service';

@Injectable({
  providedIn: 'root'
})
export class EmpService {

  constructor(private httpClient: HttpClient, private appConfigService: AppConfigService) { }

  private apiUrl = this.appConfigService.apiBaseUrl   '/api/employee';

  public getEmp(): Observable<IempList> {
    return this.httpClient.get(this.apiUrl)
      .pipe(map((res: IempList) => res));
  }

  public deletEmp(id): Observable<any> {
    return this.httpClient.delete(this.apiUrl   '/'   id)
      .pipe(map((res: any) => res));
  }

  public createEmp(formData): Observable<any> {
    return this.httpClient.post(this.apiUrl   '/create', formData.data)
      .pipe(map((res: any) => res));
  }

  public editEmp(formData): Observable<any> {
    return this.httpClient.post(this.apiUrl   '/update', formData.empData)
      .pipe(map((res: any) => res));
  }
}

從這里開始，您將需要使用您的部署方法（例如 azure devops 管道）根據您的環境重命名資產檔案夾中的相應檔案

qa：重命名 app-settings.qa.json -> app-settings.json prod：重命名 app-settings.prod.json -> app-settings.json

有了它，您將擁有一個運行時應用程式配置

標籤：有角的 打字稿 angularjs 指令

上一篇：角度異步請求回傳空值

下一篇：Javascript擴展運算子替代方案