Debugging Angular Routing Module sourcemaps

Question

How can I view and debug angular routing module code in angular application generated via angular cli version 9.

I know I can open developer tools, press cmd+p and type router.ts this opens the angular routing module code but the same steps does not work for a locally create angular cli application. Instead of opening router.ts it opens router.js.

I need to access router.ts not router.js.

Answer 1

This question was similar to this

The solution is to to modify the angular.json file

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "angular-source-map:build",
    "sourceMap": true,
    "vendorSourceMap": true
}

In newer versions of angular, using vendorSourceMap gives an error: Property vendorSourceMap is not allowed

And the object configuration for sourceMap is recommended to control sourceMap for different aspects:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "angular-source-map:build",
    "sourceMap": {
      "scripts": true,
      "styles": false,
      "hidden": true,
      "vendor": true
    }
  }
}