3

我在 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"
          }
        }
      }
    }

我错过了什么吗？

4

1 回答 1

3

当我在寻找如何获取.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-server 相关逻辑，例如webpack.server.config.js. 因此，可以应用与 . 中的基本相同的dotenv代码webpack.browser.config.js。但是，它不再起作用了。Angular CLI Builders 被用于构建和服务器 SSR 应用程序。

部署到Firebase/using Cloud Functions for Firebase（可能还有其他 Serverless/FaaS）？

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

对于调试，我建议：

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

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

于 2020-11-30T17:50:43.480 回答