在基於 nx 的 nodejs 應用程序中使用環境變量

Question

我已經在 nrwl/nx 工作區中設置了一個包含多個 nodejs 和 angular 應用程序的項目。

我正在嘗試使用 nodejs 應用程序中的環境文件。

我已經設置了這樣的導入： import {environment} from './environments/environment';

然后我運行ng serve my-node-app並顯示非生產環境。

現在我嘗試執行ng serve my-node-app --prod以查看該應用程序如何與生產設置配合使用 - 但我收到錯誤消息：

Configuration 'production' could not be found in project my-node-app 。

這是項目的 angular.json 配置：

"ui-server": {
      "root": "apps/ui/server",
      "sourceRoot": "apps/ui/server/src",
      "projectType": "application",
      "prefix": "ui-server",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@nrwl/builders:node-build",
          "options": {
            "outputPath": "dist/apps/ui/server",
            "main": "apps/ui/server/src/main.ts",
            "tsConfig": "apps/ui/server/tsconfig.app.json",
            "assets": ["apps/ui/server/src/assets"]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "extractLicenses": true,
              "fileReplacements": [
                {
                  "replace": "apps/ui/server/src/environments/environment.ts",
                  "with": "apps/ui/server/src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@nrwl/builders:node-execute",
          "options": {
            "buildTarget": "ui-server:build"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "apps/ui/server/tsconfig.app.json",
              "apps/ui/server/tsconfig.spec.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "test": {
          "builder": "@nrwl/builders:jest",
          "options": {
            "jestConfig": "apps/ui/server/jest.config.js",
            "tsConfig": "apps/ui/server/tsconfig.spec.json"
          }
        }
      }
    }

我錯過了什么嗎？

Answer 1

我在尋找如何獲取.env文件中定義的環境變量時發現了這篇文章。

process.env.ENVIRONMENTAL_VARIABLES在前端部分可以在服務器（例如，在渲染時訪問Angular Universal ），具有.env中的根Nrwl monorepo和的WebPack屬性，如：

const dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    new dotenv(),
  ],
};

不要忘記改變你的angular.json ：

...
"architect": {
  "build": {
     "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.browser.config.js",
           "replaceDuplicatePlugins": true
          },
          ...

我將自定義webpack命名為webpack.browser.config.js 。

現在，假設您有一個server/... ，您將其用於某些后端內容，那么您將無法在那里訪問它們。 您需要安裝dotenv包並在server/main.ts ，假設這是您的服務器的根目錄，需要這個包，這樣：

require('dotenv').config();

注：直到Angular 8 ，我們能夠建立還webpack -server相關的邏輯，在一個文件中，如webpack.server.config.js 。 因此，在webpack.browser.config.js應用與dotenv相關的基本相同的代碼是可行的。 但是，它不再起作用了。 Angular CLI Builders 被用來構建和服務 SSR 應用程序。

部署到Firebase /使用Cloud Functions for Firebase （以及可能的其他無服務器/FaaS）？

然后在您的functions文件夾中，您還需要粘貼.env文件。 我在這里假設您正在部署的functions 。

對於調試，我建議：

console.log(require('dotenv').config({ debug: true }));

可能會節省你很多時間。