SSR 在 Angular 中获取了错误的环境

Question

我有 Angular 6 个应用程序，其中包含 SSR。我注意到它在 server.js 中的 SSR 上使用了错误的 environmanet 变量文件 (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'
};


/***/ }),

你也可以看到 angulars 过时的建议使用 ng build --env=prod 但我使用 ng build --configuration=prod 也尝试过 ng build --prod.

有什么解决办法吗？

Answer 1

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

Answer 2

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

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

编辑 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"

}

SSR 在 Angular 中获取了错误的环境

SSR takes wrong environment in Angular

environment-variables

server-side-rendering

angular

angular6