如何将我的 Angular 应用程序部署到不同的 firebase 环境？答案

【问题标题】：How do I deploy my Angular App to different firebase environments?如何将我的 Angular 应用程序部署到不同的 firebase 环境？
【发布时间】：2021-03-15 22:07:13
【问题描述】：

我想让我的 Angular 应用在两个不同的网站上运行，一个用于开发/展示目的，一个用于生产。

为此，我创建了两个 firebase 项目（app 和 appDev），每个项目都有自己的实时数据库。

如何将我的应用正确部署到这些环境？我需要使用 firebase CLI 还是 Angular CLI？

我发现了 angular src/environments 文件夹，其中包含我的 environment.ts 和 environment.prod.ts - 但实际上它似乎并没有改变任何东西，我可以将错误数据放入该文件，它仍然会正确部署到我的开发环境（我最初配置 ng add @angular/fire）并使用开发数据库运行。

我还发现了 firebase 目标，但对于我想要实现的目标，它们似乎非常强大（具有不同的资源类型和东西），我可能无法使用 ng deploy，所以我不确定这是否是正确的方向.

第三种方法似乎是“firebase 使用--add”并添加多个项目。

现在我可以随时在我想切换时重新初始化 firebase，这可行，但不能这样想。任何指针？环境与目标和项目之间的假定区别是什么？

【问题讨论】：

标签： angular firebase google-cloud-firestore angularfire

【解决方案1】：

在文件 angular.json 前任： “配置”：

    { "staging": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.staging.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ]
    },
    "demo": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.demo.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ]
    },

src/environments/environment.staging.ts

export const environment = {
  production: true,
  apiUrl: 'https://firebase/api'
};

型号：

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

this.http.get(`${environment.apiUrl}/some/select_options`, { params })
      .pipe();

然后构建或运行：

ng build --configuration=staging

【讨论】：