Unable to use devtools with ngserve

[kartikwatwani]

Angular DevTools version (required):1.0.2

**Angular version (required):12.1.0

_Description of issue: Even though I am running the application with "ng serve" I am getting a message "Angular application running in production mode. We recommend using DevTools with apps in dev mode, running ng serve.". Please check.

• Include (clipped) screenshot images if possible.
  

Steps to reproduce:

1. Run the app with ng serve

2. Click the extension icon in the address bar.

Additional details:

[mgechev]

Would you share your angular.json or a minimal reproduction we can use to debug?

[kartikwatwani]

Would you share your angular.json or a minimal reproduction we can use to debug?

@mgechev Sharing the angular.json below.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": ["src/custom-theme.scss", "src/styles.css"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.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": "10mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": ["src/styles.css"],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "myapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "myapp:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "myapp",
  "cli": {
    "analytics": true
  }
}

[mgechev]

Thanks! We'll look into that and let you know if we need more information.

[mgechev]

@alan-agius4 has insights here. He'll comment tomorrow his morning :)

[alan-agius4]

Hi @itsmeneartou,

It looks like the angular.json was not properly migrated to support version 12. What is happening here is that you are running fully optimized builds during development.

Did you update your workspace using ng update? You can run the below command to force the migrations to re-run.

ng update @angular/cli --migrate-only --from=11 --to=12.1

More information about the update procedure can be found https://update.angular.io/

[mgechev]

@itsmeneartou let us know if this resolves your problem :)

[kartikwatwani]

@mgechev Problem resolved using the command mentioned by @alan-agius4. Thanks :)

[Quo0]

If command mention above didn't help, you can just update your angular.json manually

Given your project name is my-app

• at projects['my-app'].architect.build you should add field "defaultConfiguration": "production"
• at projects['my-app'].architect.build.configurations.production you should add field development

 "development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
}

• at projects['my-app'].architect.serve you should add field "defaultConfiguration": "development"
• at projects['my-app'].architect.build.configurations.production you should add field development

"development": {
    "browserTarget": "my-app:build:development"
}

Then run ng serve again and reopen chrome devtools