Application is running with 'ng serve' but devtools detect production mode

[AfikGrinstein]

Angular DevTools version (required): 1.0.0

Angular version (required): 12.0.0

Link to a minimal stackblitz reproduction (strongly encouraged):

Description of issue: My application is running with 'ng serve' but devtools shows this error message: 'We detected an application built with production configuration. Angular DevTools only supports development builds.'

• Include (clipped) screenshot images if possible.

Steps to reproduce:

1.

2.

3.

Additional details:

[Fedduh]

I had the same issue. I noticed that when i changed production: true, to production: false in environment.ts, it worked for me.

[AfikGrinstein]

I had the same issue. I noticed that when i changed production: true, to production: false in environment.ts, it worked for me.

this is my environment.ts file.

[manigandansettu]

Still, I have issue. We detected an application built with production configuration. Angular DevTools only supports development builds.

[rahulg59]

goto tsconfig.json and make sure ivy isn't disabled.

[angelaman]

goto tsconfig.json and make sure ivy isn't disabled.

Can this be confirmed? If that's the case, the error message is really confusing. Would be nice to have slight more details and maybe some suggestion on how to fix it.

[rahulg59]

goto tsconfig.json and make sure ivy isn't disabled.

Can this be confirmed? If that's the case, the error message is really confusing. Would be nice to have slightly more details and maybe some suggestion on how to fix it.

I have also faced the same issue and when I checked the details of dev tools it mentioned that it supports angular v9+ with ivy enabled. So I have crossed checked the ivy compiler configuration and found that it was disabled. Although I agree the error should be more specific.

[AfikGrinstein]

goto tsconfig.json and make sure ivy isn't disabled.

Can this be confirmed? If that's the case, the error message is really confusing. Would be nice to have slight more details and maybe some suggestion on how to fix it.

Still not working. I added 'enableIvy': true to tsconfig.json and also tsconfig.app.json file. AFAIK the default is true so I didn't have any property which disabled IVY and also 'aot' is marked as true in angualr.json file.

Any more ideas?

[mgechev]

Are you invoking enableProdMode() by any chance somewhere?

Although I agree the error should be more specific.

True. I'll look into this next week.

[angelaman]

Are you invoking enableProdMode() by any chance somewhere?

I hope this doesn't count?

if (environment.production) {
  enableProdMode();
}

[mgechev]

Nope, that's fine!

[detonimarco]

I've same issue with Angular version: 12.0.1.

AOT is enabled and inside the enviroment (also in environment.prod.ts ) export const environment = { production: false, .... }

I didn't find other configurations to change

[mgechev]

@detonimarco would you share the output of ng in your console?

[detonimarco]

@mgechev this

` > Executing task: npm run start:proxy:matrix:manager <

performance-appraisal-fe@0.0.1 start:proxy:matrix:manager C:\progetti\dev\performance-appraisal-fe ng serve --configuration proxy --proxy-config proxy.conf-matrix-manager.json

⠋ Generating browser application bundles...[HPM] Proxy created: /api -> http://localhost:8080 [HPM] Proxy rewrite rule created: "^/api" ~> "" [HPM] Subscribed to http-proxy events: [ 'error', 'close' ] [HPM] Proxy created: /sf -> https://api.successfactors.eu [HPM] Proxy rewrite rule created: "^/sf" ~> "" [HPM] Subscribed to http-proxy events: [ 'error', 'close' ]

---

This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!

---

✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Size main.js | main | 1.59 MB styles.css, styles.js | styles | 334.42 kB polyfills.js | polyfills | 278.10 kB runtime.js | runtime | 3.23 kB

                  | Initial Total |   2.19 MB

Lazy Chunk Files | Names | Size 39.js | - | 208.97 kB

Build at: 2021-05-22T20:53:36.961Z - Hash: 6777333b97969380181d - Time: 51826ms

Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/

√ Compiled successfully. ✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Size main.js | main | 1.59 MB

4 unchanged chunks

Build at: 2021-05-22T20:54:01.899Z - Hash: f68df11aaabde193dc04 - Time: 23783ms

√ Compiled successfully. `

I also check the environment.production variable on main.ts ` .... import { environment } from './environments/environment';

console.log(environment.production? 'PRODUCTION':'DEV'); .... `

getting: DEV main.js:1 on web console

[mgechev]

I meant in the browser console, sorry. I want to verify if you're using Ivy.

Looks like our message is incorrect - we show that app is in production while in fact it's running View Engine rather than Ivy.

[detonimarco]

@mgechev I didn't see messages on browse console

I attached also project conf files

angular.json.txt tsconfig.app.json.txt tsconfig.json.txt

[mgechev]

Looks like your app is using view engine rather than Ivy.

We're currently not showing the correct error message in this case, but we'll push a patch next week to fix that.

Make sure you nice your project to ivy so you can take advantage of the extension.

[hugoebarboza]

Hi @mgechev, I still have the issue. I follow the Angular Ivy guide.

"We detected an application built with production configuration. Angular DevTools only supports development build"

What else can I do ?

1) angular.json aot = true

2) package.json {"scripts": { "postinstall": "ngcc"}}

3) I added 'enableIvy': true to tsconfig.json and also tsconfig.app.json file.

4) Enviroments production: false 4.1) comment line in main.ts / if (environment.production) { enableProdMode(); } /

5) Delete modules folder and npm install

6) Chrome DevTool 1.0.2

[mgechev]

Hi @mgechev, I still have the issue. I follow the Angular Ivy guide.

"We detected an application built with production configuration. Angular DevTools only supports development build"

What else can I do ?

1) angular.json aot = true

2) package.json {"scripts": { "postinstall": "ngcc"}}

3) I added 'enableIvy': true to tsconfig.json and also tsconfig.app.json file.

4) Enviroments production: false 4.1) comment line in main.ts / if (environment.production) { enableProdMode(); } /

5) Delete modules folder and npm install

6) Chrome DevTool 1.0.2

Would you share a repository with a minimal demo where we can reproduce the problem?

[hugoebarboza]

Hi @mgechev, I really appreciate your time and help.

I thank you for any additional help, I have been trying to solve this problem for several weeks.

I attached:

angular.json.txt tsconfig.app.json.txt tsconfig.json.txt packaje.json.txt

angular.json.txt package.json.txt tsconfig.app.json.txt tsconfig.json.txt

[mgechev]

Hi @mgechev, I really appreciate your time and help.

I thank you for any additional help, I have been trying to solve this problem for several weeks.

I attached:

angular.json.txt tsconfig.app.json.txt tsconfig.json.txt packaje.json.txt

angular.json.txt package.json.txt tsconfig.app.json.txt tsconfig.json.txt

The configuration files are not sufficient for reproducing the issue. Please create a new app with ng new and adjust the configuration so you get the same message in Angular DevTools. This would allow us to reproduce and investigate.

[hugoebarboza]

Hi @mgechev, I really appreciate your help and response.

I did a new Angular 12 project and Devtools works as expected. I am going to verify all settings in my old project.

Besides angular.json, tsconfig.json, and package.json, is there any other file that I need to pay attention ?

Thanks in advance.

[detonimarco]

@hugoebarboza beaside an issue with a component that was not compatible with ivy so it compilied only in production mode.

I added in anguar.json under "configuariton" link in "dev" profile

...
 "dev": {
"optimization": false,
 "buildOptimizer": false,
....

I see in in anguar.json under "dev" buildOptimizer is set to true, in my case switching to false solved the issue, I think you need to set also

"dev": {
              "optimization": {
                "scripts": false,

[hugoebarboza]

Hi @detonimarco, thanks for your time and help. In angular.jon I set my dev object like follow and finally works. :) :) :)

Also, I deploy with command ng serve --configuration dev

"dev": { "sourceMap": false, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "optimization": false, "buildOptimizer": false, "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "7mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "17kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.prod.ts", "with": "src/environments/environment.ts" } ] }