CODEWITHSUNDEEP
angularenvironment-variablesangular6server-side-rendering
Vytautas Pranskunas
Vytautas Pranskunas

Reputation: 890

SSR takes wrong environment in Angular

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?

Upvotes: 7

Views: 4801

Answers (4)

Siddharth Hudda
Siddharth Hudda

Reputation: 66

  1. Create configuration for server build in 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"
                }
              ]
            }
          }
        }
  1. 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.
    "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"
  }

Upvotes: 4

Виктор Могилевский
Виктор Могилевский

Reputation: 469

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

Upvotes: 12

Davideas
Davideas

Reputation: 3276

The correct configuration in angular.json is to add the fileReplacements also in the server section as others mentioned, but also calling the script with correct argument/option. Nobody mentioned before.

Double check generated content by searching yours environment values under dist/ folder.

Correct format

ng build --configuration=production && ng run app:server:production

Wrong formats

-c and --configuration and whatever argument are unknown for ng run. Simply check https://angular.io/cli/run

ng build --prod && ng run app:server -c production
ng build --prod && ng run app:server --configuration=production

Note also the option --prod for ng build is unknown!

Upvotes: 1

Vytautas Pranskunas
Vytautas Pranskunas

Reputation: 890

I have solved it. I did not add configurations with file replacement to server section in angular.json file.

Upvotes: 1

Related Questions