SSR 在 Angular 中采用错误的环境

问题描述 投票:0回答:4

我有 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

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

angular environment-variables angular6 server-side-rendering
4个回答
12
投票

我已经解决了这个问题。您需要检查您的 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"
            }
          ]
        }
      }
    }

4
投票
  1. angular.json
  2. 中创建服务器构建配置
"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"
                }
              ]
            }
          }
        }
  1. 编辑
    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"
  }

2
投票

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


1
投票

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 未知!

© www.soinside.com 2019 - 2024. All rights reserved.