Angular 11 - ng serve - Option "sourceMap" is deprecated

Question

I updated Angular project from Angular 10 to 11x. Everything works normally, except for one warning on running project using ng serve (without any option in ng serve). The warning is:

Option "sourceMap" is deprecated: Use the "sourceMap" option in the browser builder instead.

The warning is not presented in ng build.

Here is how browser builder part in angular.json of the project looks like:

"builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "sourceMap": true,
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Something related has changed in Angular 11? How to remove this warning?

Answer 1

You need to remove sourceMap from serve --> options --> sourceMap, which is deprecated.

Answer 2

I was confused by some of the answers, these options aren't really deprecated but should now be specified in the proper "build" section of angular.json, not "serve".

Answer 3

Based on previous comments, here is a working configuration :

In angular.json, add this configuration to projects.[NAME_OF_YOUR_PROJECT].architect.serve.configurations :

"dev": {
  "browserTarget": "[NAME_OF_YOUR_PROJECT]:build:dev"
}

Like that :

...
"architect": {
  "serve": {
    ...
    "configurations": {
      "production": {
        ...
      },
      "dev": {
        "browserTarget": "[NAME_OF_YOUR_PROJECT]:build:dev"
      }
    }
  },
  ...

Then, add the corresponding "dev" configuration in projects.[NAME_OF_YOUR_PROJECT].architect.build.configurations :

"dev": {
  "optimization": false,
  "sourceMap": true
}

like this example :

...
"architect": {
  "build": {
    ...
    "configurations": {
      "production": {
        ...
      },
      "dev": {
        "optimization": false,
        "sourceMap": true
      }
    }
  },
...

Now you just have to edit the "start" script command in package.json :

...
"scripts": {
  "start": "ng serve --configuration=dev",
  ...

and you should retrieve sources map files in your favorite browser !

Answer 4

Using Angular15 you have to set the sourceMap and similar settings in the angular.json file under

architect -> build -> configurations -> development

then you can load this configuration via serve using the development browserTarget setting it under

architect -> serve -> configurations -> development

angular.json example:

    {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
          },
          "configurations": {
            "production": {
              ...
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          ...
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "ng-app-15:build:production"
            },
            "development": {
              "browserTarget": "ng-app-15:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        ...
      }
    }

Then, you can run the following command to use ng serve with sourceMap properly and with the possibility of using the debugger.

ng serve --configuration=developmentstrong text

Note: if this answer will expire for some reason, you can always install the latest version of Angular and run "ng new app", by default it will show you the correct angular.json configurations to use properly sourceMap and similar settings.