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?

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

Answer 2

@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!