CODEWITHSUNDEEP
angulargoogle-chromegoogle-chrome-extension
dentist
dentist

Reputation: 244

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

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?

dev tools error angular chrome

Upvotes: 16

Views: 24479

Answers (4)

Cristian Florescu
Cristian Florescu

Reputation: 1816

Angular DevTools detects production configuration even if all others are properly defined.

This attribute of your configuration build section will activate Angular DevTools ;)

"optimization": true,

to

"optimization": false,

Upvotes: 2

Hafnernuss
Hafnernuss

Reputation: 2827

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.

Upvotes: 16

user3025289
user3025289

Reputation:

Btw: A complete working configuration (further below), and if the configuration is not the problem, then:

  • update chrome,
  • remove and re-install the extension
  • (and allow in its configuration the access of file-URLs too)
  • start with e.g. ng serve (if mono repo npx nx serve <projectname>)

You would then see, something like that (depends on your own configuration):

** Angular Live Development Server is 
listening on localhost:4200, 
open your browser on http://localhost:4200/ **
  • Open it in the browser
  • Open Chrome/Firefox/.. DevTools
  • Go to the section Angular

And you should see:

enter image description here

Last but not least: An example of complete configuration:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng14.0.2": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng14.0.2",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "ng14.0.2:build:production"
            },
            "development": {
              "browserTarget": "ng14.0.2:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng14.0.2: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",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

Upvotes: 5

Tonnio
Tonnio

Reputation: 655

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.

Upvotes: 19

Related Questions