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

user_3628010 0
Viewed 12837

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?

angular-compiler-cli angular-builder angular
3 Answers

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".

user_131643750

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

user_110255820

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 !

user_86536680
Related