19

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?

viking
  • 411
  • 1
  • 5
  • 14
  • What is your "serve" section in `angular.json`? – HTN Apr 02 '21 at 14:26
  • I actually tried the configuration you posted and I dont get the same warning. I don't think its relevant – misha130 Apr 02 '21 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 Apr 02 '21 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? –  Apr 02 '21 at 17:20

4 Answers4

13

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

Yuri
  • 4,254
  • 1
  • 29
  • 46
MichaelRRMoore
  • 131
  • 3
  • 2
    In "serve" section, it is deprecated: https://angular.io/cli/serve#options – viking May 19 '21 at 17:13
  • 2
    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. – MichaelRRMoore May 19 '21 at 18:42
  • 3
    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? – Russ Dec 20 '21 at 07:39
12

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

HTN
  • 3,388
  • 1
  • 8
  • 18
  • 1
    Rightly pointed out, use of `sourceMap` is deprecated now: https://angular.io/cli/serve#options – viking Apr 02 '21 at 17:41
  • 1
    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 ? – Liphtier Nov 08 '21 at 13:24
12

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 !

Thibault
  • 1,049
  • 9
  • 7
  • 5
    This should be the accepted answer. – Stephane Apr 21 '22 at 15:58
  • 1
    Thanks a lot! This helped me fix the problem too, migrating from Angular 10 to Angular 13. – mar10 Jun 02 '22 at 11:58
  • https://stackoverflow.com/questions/67647471/angular-12-source-map-is-missing-in-browser this answer helped me. There were more properties that I added in the architect.build.configurations.dev section that fixed my issue – Esaith Dec 04 '22 at 21:06
1

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.

Stefano Borzì
  • 1,019
  • 1
  • 15
  • 32