Angular Chrome Dev Tools extension error: "Angular DevTools only supports development builds."

Question

I am trying to debug Angular app with Angular DevTools for Chrome Extension, but I am getting an error when I try to use it:

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

Can I revert project to dev mode?

Answer 1

You may be missing a development configuration for your application.

In your angular.json navigate to architect -> build -> configurations and add these lines, below the definition of the production build:

"configurations": {
  "production": {
    // already there!
  },
  "development": { // this is new!
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
  }
},
"defaultConfiguration": "production"

And to run the build in development mode just type the next command: ng build --configuration development.

Answer 2

I had all of those settings and configurations in place in angular.json. For me, the problem was the following:

main.ts:

if (environment.production) {
  enableProdMode(); // <-- here
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

And apparently, I changed the production property of my environment.ts file at some point in the past, setting production in there to true, even in development mode.

Changing it back to false finally resolved this for me.