Angular 7: Running with production configuration but development mode still enabled

Question

My Angular 7.2.15 app is still in dev mode despite setting the production configuration and property.

Let's say, I have the following setup:

environment.ts

export const environment = {
    PRODUCTION:                      false
};

environment.production.ts

export const environment = {
    PRODUCTION:                      true
};

Then, running the project with "ng serve" will result in:

console.log("PRODUCTION?: " + environment.PRODUCTION): FALSE
console.log("isDevMode?: " + isDevMode()): TRUE

which is correct.

But running it with "ng serve --configuration=production" will result in:

console.log("PRODUCTION?: " + environment.PRODUCTION): TRUE
console.log("isDevMode?: " + isDevMode()): TRUE

The Browser console is showing: "Angular is running in the development mode. Call enableProdMode() to enable the production mode."

The same happens when using "ng build" with above option.

Angular documenation says:

--prod=true: shorthand for "--configuration=production". When true, sets the build configuration to the production target.

--configuration=configuration: A named build target, as specified in the "configurations" section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Setting this explicitly overrides the "--prod" flag

Additionally verifying that and adding "--prod" does not change anything of the results.

And according to this post (old Angular version; https://stackoverflow.com/a/44782202/5446400) and interaction of environment.ts, production property, --configuration, --prod and enableProdMode(), I should be good to go with my configuration. There should be no need to call enableProdMode().

angular.json:

...
 "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.production.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
...

So, why is the dev mode still enabled?

Well... by default angular cli generates the const `production` in all lower case and you changed it to all uppercase, you need to also change the const that is being used, specifically look at `main.ts` — penleychan, Oct 11 '19 at 13:35
check you angular.json file configurations->production->fileReplacements — Jens Alenius, Oct 11 '19 at 13:36
Did you check what I mentioned? Your `angular.json` is not the issue as you already did the test with `ng serve --configuration=production` which is return result `TRUE`. — penleychan, Oct 11 '19 at 14:27
@penleychan As you can see in my test log output above when starting with "ng serve" the PRODUCTION property is changed to false. So there can't be any case sensitivity. But I tried your suggestion nontheless - sadly no difference. — J. Doe, Oct 11 '19 at 14:28
do you have `if (environment.production) { enableProdMode() }` in `main.ts`? Or rather if you insist on caps (please don't do this) `if (environment.PRODUCTION) { enableProdMode() }` — Andrew Allen, Oct 11 '19 at 14:29
What Andrew Allen said is what I was referring. That is your issue. — penleychan, Oct 11 '19 at 14:41
Posted an answer to my post, that was the problem. A misunderstanding of the documentation - which is not that unmistakeable from my perspective. Thank you guys! — J. Doe, Oct 11 '19 at 14:46

score 1 · Answer 1 · answered Oct 11 '19 at 14:06

1

Verify your angular.json has following configuration for production:

"configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }

answered Oct 11 '19 at 14:06

Shikha

551
5
20

Hi, I edited my post and added my angular.json. It is already looking like this – J. Doe Oct 11 '19 at 14:24
2

Did you added this in main.ts? if (environment.production) { enableProdMode() } – Shikha Oct 11 '19 at 14:38
Posted an answer, yes that was the problem! – J. Doe Oct 11 '19 at 14:47

score 1 · Accepted Answer · answered Oct 11 '19 at 14:45

@AndrewAllen @Shikha Of course I had it not included :D As I interpreted the documentation that having a single statement (environment.production = true) should be enough: https://angular.io/cli/build: "A "production" configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the --configuration="production" or the --prod="true" option.

They should better mention there that loading the prod configuration does not also set the application to production mode...Ahhh Angular.

Thank you very much!

Angular 7: Running with production configuration but development mode still enabled

2 Answers2