我有 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.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"
}
]
}
}
}
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"
}
我已经解决了。我没有将带有文件替换的配置添加到 angular.json 文件中的服务器部分。
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 未知!