如何替换 Nx monorepo 中 Angular 应用程序的环境配置

Question

将我的测试应用程序部署到 firebase-hosting。

单击注册/登录按钮调用

'signInWithPopup(auth, provider)'

;

弹出窗口显示：“无法访问此站点。127.0.0.1 拒绝连接。”

我认为错误的原因是“构建”期间没有更改环境。

provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),

provideAuth(() => {
    const auth = getAuth();
    if (environment.useEmulators) {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099');
    }
    return auth;
}),

我们曾经在 Angular 应用程序中进行“角度文件替换”。

问题：如何替换 Nx monorepo 中 Angular 应用程序的环境配置？

Angular 应用程序的project.json 文件：

"targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:application",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/qubitme",
        "index": "apps/qubitme/src/index.html",
        ...
      },
      "configurations": {
        "production": {
          ...
          "outputHashing": "all"
        },
        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true
        }
      },
      "defaultConfiguration": "production"
    },

Answer 1

这是我如何在 NX monorepo + Agnular 应用程序中替换 env 文件：

项目.json

"build": {
      "executor": "@angular-devkit/build-angular:application",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/ngsf",
        "index": "apps/ngsf/src/index.html",
        "browser": "apps/ngsf/src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "apps/ngsf/tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": ["apps/ngsf/src/assets"],
        "styles": [
          "apps/ngsf/src/styles.scss",
          "@angular/material/prebuilt-themes/indigo-pink.css",
          "apps/ngsf/src/assets/styles/splash-screen.css"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "1mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "fileReplacements": [
            {
              "replace": "libs/common/ui-common/src/environments/environment.ts",
              "with": "libs/common/ui-common/src/environments/environment.prod.ts"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true
        }
      },
      "defaultConfiguration": "production"
    },

希望它对你有用！