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.