CODEWITHSUNDEEP
javascriptangulartypescriptangular-cliangular-universal
Lukas Sorensen
Lukas Sorensen

Reputation: 407

Angular CLI & Angular Universal cannot get environment.production to be true on server with --prod

I set up my web app using the Universal Starter - here and am trying to use environment.production to switch between a production config and a development config inside ./src/config/server.config.ts but the value is always false. When I check the value inside a lazy loaded route the value is correct. What am I to do to get it to be the correct value server side?

any help is appreciated. thank you

Upvotes: 4

Views: 1793

Answers (2)

Diego
Diego

Reputation: 719

I think the reason is that in webpack.server.config.js the mode is set to 'none', not doing so gives an error when building the ssr, so the environment is not set to 'production'.

The solution I'm implementing for now is to set a new configuration with fileReplacements in the server build (angular.json):

      "server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
      },
      "configurations": {
        "mynewconfig": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
      }

Then in the package.json I add that configuration when building the ssr:

    "build:client-and-server-bundles": "ng build --prod && ng run my-app:server --configuration=mynewconfig",

This is for Angular > 6, for prior versions you can use the --env flag instead of --configuration.

Upvotes: 0

Dylan Wright
Dylan Wright

Reputation: 1212

I think you want something with how you're configuring webpack and creating your environment in your npm scripts. You can set the environment based on your webpack configuration. Using webpack-merge you can have multiple configuration packages and by setting each one up to the values you have defined you can swap back in forth with webpack-merge in your npm scripts. Refer to the link below.

https://webpack.js.org/guides/production/

Upvotes: 2

Related Questions