簡介

如果你正在構(gòu)建一個(gè)使用 API 的應(yīng)用程序，你會(huì)想在開發(fā)過程中使用測試環(huán)境的 API 密鑰，而在生產(chǎn)環(huán)境中使用生產(chǎn)環(huán)境的 API 密鑰。在 Angular 中，你可以通過 environment.ts 文件創(chuàng)建環(huán)境變量。

在本教程中，你將學(xué)習(xí)如何在 Angular 中使用環(huán)境變量。

先決條件

如果你想跟著本文操作，你需要：

• 一個(gè)用于 Node.js 的本地開發(fā)環(huán)境。請參考《如何安裝 Node.js 并創(chuàng)建本地開發(fā)環(huán)境》。

本教程已經(jīng)驗(yàn)證過可以在 Node v16.2.0、npm v7.15.1 和 @angular/core v12.0.3 下運(yùn)行。

檢測環(huán)境

Angular CLI 項(xiàng)目已經(jīng)使用了一個(gè) production 環(huán)境變量，在生產(chǎn)環(huán)境下啟用生產(chǎn)模式：

// ...

if (environment.production) {
  enableProdMode();
}

Angular 還為我們提供了一個(gè)名為 isDevMode 的實(shí)用函數(shù)，可以用來檢查應(yīng)用程序是否在開發(fā)模式下運(yùn)行：

import { Component, OnInit, isDevMode } from '@angular/core';

@Component({ ... })
export class AppComponent implements OnInit {
  ngOnInit() {
    if (isDevMode()) {
      console.log('Development!');
    } else {
      console.log('Production!');
    }
  }
}

這個(gè)示例代碼將在開發(fā)模式下記錄消息 'Development!'，在生產(chǎn)模式下記錄消息 'Production!'。

添加開發(fā)和生產(chǎn)變量

你還會(huì)注意到，默認(rèn)情況下，在 /src/environment 文件夾中有一個(gè)用于開發(fā)環(huán)境和一個(gè)用于生產(chǎn)環(huán)境的環(huán)境文件。

假設(shè)我們想要根據(jù)是否處于開發(fā)或生產(chǎn)模式來使用不同的密鑰：

對于 environment.ts 中的開發(fā)設(shè)置：

export const environment = {
  production: false,
  apiKey: 'devKey'
};

對于 environment.prod.ts 中的生產(chǎn)設(shè)置：

export const environment = {
  production: true,
  apiKey: 'prodKey'
};

在我們的組件中，我們只需要這樣做就可以訪問變量：

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

Angular 會(huì)負(fù)責(zé)切換正確的環(huán)境文件。

使用以下命令運(yùn)行開發(fā)模式：

ng serve

apiKey 變量將解析為 devKey。

使用以下命令運(yùn)行生產(chǎn)模式：

ng serve --configuration=production

apiKey 變量將解析為 prodKey。

添加暫存變量

通過在 angular.json 文件的 configurations 字段中添加新條目，可以在 Angular CLI 項(xiàng)目中添加新的環(huán)境。

讓我們基于生產(chǎn)使用的配置添加一個(gè)暫存環(huán)境：

{
  // ...
  "projects": {
    "angular-environment-example": {
      // ...
      "prefix": "app",
        "build": {
          // ...
          "configurations": {
            "staging": {
              // ...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.stage.ts"
                }
              ],
              // ...
            },
            // ...
          },
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "staging": {
              "browserTarget": "angular-environment-example:build:staging"
            },
          }
        },
      }
    }
  }
}

現(xiàn)在我們可以添加一個(gè)暫存環(huán)境文件：

export const environment = {
  production: true,
  apiKey: 'stagingKey'
};

使用以下命令運(yùn)行開發(fā)模式：

ng serve --configuration=staging

apiKey 變量將解析為 stagingKey。

結(jié)論

在本教程中，你學(xué)習(xí)了如何在 Angular 中使用環(huán)境變量。

如果你想了解更多關(guān)于 Angular 的知識，請查看我們的 Angular 主題頁面，了解練習(xí)和編程項(xiàng)目。

以上就是詳解如何在Angular中使用環(huán)境變量的詳細(xì)內(nèi)容，更多關(guān)于Angular環(huán)境變量的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論