Angular 13 ng serve with aot: true has incorrect map files

Question

I upgraded from Angular 9 to Angular 13 with an Ivy compiler. By default, AOT is not set to true. When I run ng build with source maps on, everything works correctly and I can set breakpoints that are hit correctly. When I run ng serve, the breakpoints do not line up with the code correctly. I am not sure why this is happening or how to properly debug this. I did find that if I set AOT to false when running ng serve, the breakpoints appear to be getting hit correctly. It does not seem to make sense that AOT maps would work for the build, but not for serve.

Has anyone else experienced this and know how to keep AOT set to true when running ng serve and still have the breakpoints work correctly?

Upgraded from Angular 13.2 to 13.3 with no change.

Answer 1

• Update your angular.json

1. add or update the "development" configuration inside your build:configuration

    "build": {
      ...
      "configurations": {
        ...
        "development": {
          ...
          "sourceMap": true
        }
      }
    }

2. update the serve section of your application:

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "your-app:build:development"
          },
          "configurations": {
            "development": {
              "browserTarget": "your-app:build:development"
            }
          }
        },

Note: you will see also your console.log() with the right file/line instead of main.js