SSR 在 Angular 中采用错误的环境答案

【问题标题】：SSR takes wrong environment in AngularSSR 在 Angular 中采用错误的环境
【发布时间】：2019-02-06 06:50:32
【问题描述】：

我有带有 SSR 的 Angular 6 应用程序。我注意到它在 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 的 angulars 过时建议，但我使用 ng build --configuration=prod 也尝试使用 ng build --prod。

有什么办法解决这个问题吗？

【问题讨论】：

标签： angular environment-variables angular6 server-side-rendering

【解决方案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" } ] } } }

编辑 package.json 以使用上面创建的构建配置。根据角度文档，脚本对象中必须有一个名为“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 文件。在服务器部分，你需要"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" } ] } } }

【讨论】：

【解决方案3】：

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

【讨论】：