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?

I actually tried the configuration you posted and I dont get the same warning. I don't think its relevant — misha130
– misha130, Commented Apr 2, 2021 at 15:38
@HTN, here is "serve" section in my angular.json: "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "my-app:build", "sourceMap": { "scripts": true, "styles": true, "vendor": true } }, "configurations": { "production": { "browserTarget": "easyproduction-web:build:production" } } }, — viking
– viking, Commented Apr 2, 2021 at 17:03
I don't understand the question. The warning says: "Option "sourceMap" is deprecated". In your serve configuration you have "sourceMap": { "scripts": true, "styles": true, "vendor": true } }. What exactly is unclear with this warning? — user15388024
– user15388024, Commented Apr 2, 2021 at 17:20

Yuri · Accepted Answer · 2022-05-24 15:16:48Z

14

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

edited May 24, 2022 at 15:16

Yuri

4,5482 gold badges32 silver badges49 bronze badges

answered May 19, 2021 at 10:20

MichaelRRMoore

1413 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

viking Over a year ago

In "serve" section, it is deprecated: angular.io/cli/serve#options

MichaelRRMoore Over a year ago

Yes we agree. Just pointing out that it doesn't mean you can't turn source maps on or off for ng serve, as long as you put it in the right build section. Just wanted to make it clear in case there are other people like me who didn't get it.

Russ Over a year ago

Just upgrade to Angular13 from Angular 12 and use to have ng serve --source-map=true --prod=false --watch=true but now it says --source-map is an "unknown option". I have to use ng serve as I have to run HTTPS/SSL locally for our system. But now I have no source maps? Any ideas?

HTN · Accepted Answer · 2021-04-02 17:24:57Z

13

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

answered Apr 2, 2021 at 17:24

HTN

3,6121 gold badge10 silver badges18 bronze badges

2 Comments

viking Over a year ago

Rightly pointed out, use of sourceMap is deprecated now: angular.io/cli/serve#options

Liphtier Over a year ago

I didn't have this flag in serve configuration, but suddenly ( after update) debugging stopped working. I found that sourceMaps are not generated anymore. Putting this deprecated flag in solved the issue. What has changed in default sourceMap configuration ?

Thibault · Accepted Answer · 2022-03-25 13:33:30Z

13

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 !

answered Mar 25, 2022 at 13:33

Thibault

1,1979 silver badges7 bronze badges

3 Comments

Stephane Over a year ago

This should be the accepted answer.

mar10 Over a year ago

Thanks a lot! This helped me fix the problem too, migrating from Angular 10 to Angular 13.

Esaith Over a year ago

stackoverflow.com/questions/67647471/… this answer helped me. There were more properties that I added in the architect.build.configurations.dev section that fixed my issue

Stefano Borzì · Accepted Answer · 2023-07-12 13:09:27Z

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.

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related