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的monorepo和webpack属性的根中有Nrwl ：

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之类的文件中设置webpack.server.config.js-服务器相关的逻辑。因此，可以应用与dotenv中与webpack.browser.config.js相关的基本相同的代码。但是，it doesn't work anymore。 Angular CLI Builders are being used to build & server SSR apps instead。

要部署到Firebase /使用Cloud Functions for Firebase（可能还有其他无服务器/ FaaS）吗？

然后，在您的functions文件夹中，您还需要粘贴.env文件。我在这里假设您是从functions开始部署的。

对于调试，我建议：

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

可能会节省您很多的时间。

在基于nx的Node.js应用中使用环境变量

1 个答案: