SSR takes wrong environment in Angular

Question

I have Angular 6 application with SSR in place. I noticed that it takes wrong environmanet variable file (environment.ts) once on SSR in server.js (not happening without SSR)

this is peace of compiled server.js var environment_1 = __webpack_require__(/*! ../../../../environments/environment */ "./src/environments/environment.ts"); and it is natural because when compiling browser angular.json swaps files

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

however once webpack compiles server it just takes enironment.ts which is dev configuration

/***/ "./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'
};


/***/ }),

also you can see angulars outdated suggestion to use ng build --env=prod but i use ng build --configuration=prod also tried with just ng build --prod.

Any ideas how to solve this?

Answer 1

I have solved this problem. You need to check your angular.json file. In the server section, you need "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. Create configuration for server build in angular.json

Sample Code: "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. Edit package.json to use the above created build configuration. As per angular documentation, There must be a key named "build:client-and-server-bundles" in scripts object. Modify "ng build --prod && ng run app:server" to "ng build --prod && ng run app:server -c production".

Sample code:

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

}