SSR 在 Angular 中采用错误的环境

Question

我有 Angular 6 应用程序和 SSR。我注意到在 server.js 中的 SSR 上一次使用了错误的环境变量文件（environment.ts）（没有 SSR 就不会发生）

这是编译后的 server.js 的和平版本

var environment_1 = __webpack_require__(/*! ../../../../environments/environment */ "./src/environments/environment.ts");

这很自然，因为编译浏览器时 angular.json 会交换文件

 "fileReplacements": [
                            {
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }
                        ]

然而，一旦 webpack 编译服务器，它只需要 enironment.ts 这是开发配置

/***/ "./src/environments/environment.ts":
/*!*****************************************!*\
  !*** ./src/environments/environment.ts ***!
  \*****************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
Object.defineProperty(exports, "__esModule", { value: true });
exports.environment = {
    production: false,
    apiUrl: 'dev url',
    googleMapsApiKey: 'dev key'
};


/***/ }),

您还可以看到角度过时的建议使用

ng build --env=prod

，但我使用

ng build --configuration=prod

也尝试过仅使用

ng build --prod

。

有什么想法可以解决这个问题吗？

Answer 1

我已经解决了这个问题。您需要检查您的 angular.json 文件。在服务器部分，您需要

   "server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "./dist/server",
        "main": "./src/client/main.server.ts",
        "tsConfig": "./src/client/tsconfig.server.json"
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/client/environments/environment.ts",
              "with": "src/client/environments/environment.prod.ts"
            }
          ]
        },
        "cloud": {
          "fileReplacements": [
            {
              "replace": "src/client/environments/environment.ts",
              "with": "src/client/environments/environment.cloud.ts"
            }
          ]
        }
      }
    }

Answer 2

1. 在

   angular.json

中创建服务器构建配置

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }

2. 编辑

   package.json

   以使用上面创建的构建配置。 根据 Angular 文档，脚本对象中必须有一个名为

   build:client-and-server-bundles

   的键。将

   ng build --prod && ng run app:server

   修改为

   ng build --prod

   &&

   ng run app:server -c production

   。

    "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --prod && ng run app:server -c production",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
  }

Answer 3

我已经解决了。我没有将带有文件替换的配置添加到 angular.json 文件中的服务器部分。

Answer 4

angular.json 中的正确配置是像其他人提到的那样在

fileReplacements

部分中添加

server

，而且还使用正确的参数/选项调用脚本。之前没有人提到过。

通过在

dist/

文件夹下搜索您的环境值来仔细检查生成的内容。

正确格式

ng build --configuration=production && ng run app:server:production

格式错误

-c 和 --configuration 以及任何参数对于

ng run

来说都是未知的。 只需检查https://angular.io/cli/run

ng build --prod && ng run app:server -c production
ng build --prod && ng run app:server --configuration=production

另请注意

ng build

的选项 --prod 未知！