How to fix development mode for Angular
The Problem
My Angular 12 application was quite slow when I started it with ng serve. When I open the Angular DevTools I get the error:
We detected an application built with production configuration. Angular DevTools only supports development builds.
The Solution
You’ll need an extra configuration for the development build if your angular.json doesn’t have it. That’s the case if you migrated from an earlier Angular version to v12 or later.
Adjust angular.json:
Add the development options in the architect section under configurations:
I disabled all optimizations for the development mode, but you can fine-tune them if you like. See the documentation for details.
You’ll also need a browserTarget for your configuration:
{
// previous configuration
"projects": {
"your-project-name": {
// some options
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
// options outcommented
},
/* add the development configuration with disabled
optimizations */
"configurations": {
"development": {
"optimization": false
},
"production": {
// production options
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-project-name:build"
},
"configurations": {
"production": {
"browserTarget": "your-project-name:build:production"
},
/* add a new development configuration
with a `browserTarget` */
"development": {
"browserTarget": "your-project-name:build:development"
}
},
/* add the development mode
as default configuration */
"defaultConfiguration": "development"
},
}
}
},
"defaultProject": "your-project-name"
}
That should do the trick.