Can't Debug Angular Project, Missing .Map Files

Question

We have an app that cannot be debugged in browser dev tools because, I assume, it's missing the .map files:

To generate the maps, I tried all the suggestions I could find online but nothing worked. Finally, I created a new Asp.Net Core Angular project just so I could compare them side by side to figure this out. After swapping dependencies, I discovered the problem is caused by something in the package.json:

{
  "name": "aspnet_angular_test_app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run aspnet_angular_test_app:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "12.0.3",
    "@angular/common": "12.0.3",
    "@angular/compiler": "12.0.3",
    "@angular/core": "12.0.3",
    "@angular/forms": "12.0.3",
    "@angular/platform-browser": "12.0.3",
    "@angular/platform-browser-dynamic": "12.0.3",
    "@angular/platform-server": "12.0.3",
    "@angular/router": "12.0.3",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^5.0.1",
    "core-js": "^3.13.1",
    "jquery": "^3.6.0",
    "luxon": "^1.28.0",
    "oidc-client": "^1.11.5",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.3",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "12.0.3",
    "@angular/cli": "12.0.3",
    "@angular/compiler-cli": "12.0.3",
    "@angular/language-service": "12.0.3",
    "@types/jasmine": "~3.7.7",
    "@types/jasminewd2": "~2.0.9",
    "@types/luxon": "^1.27.1",
    "@types/node": "^14.17.0",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "^6.3.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.6.0",
    "typescript": "4.2.3"
  },
  "optionalDependencies": {
    "protractor": "~7.0.0",
    "sass": "~1.34.0",
    "ts-node": "~10.0.0",
    "tslint": "^6.1.0"
  }
}

Please, how can this be fixed? I have tried adjusting the packages but I can't seem to get anywhere.

score 0 · Answer 1 · answered Jul 19 '21 at 02:22

0

When you start the project debugging, do you have the following errors in the browser：

This is the npm module is not installed.

Please run npm install to install the node module.

Official document：https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-5.0&tabs=visual-studio

answered Jul 19 '21 at 02:22

Tupac

2,590
2
6
19

Thank you @Chaodeng, for you response. I have not seen this error before. We can run the 'ng serve' command with no problems. The app runs fine, we simply cannot debug the typescript in the Chrome dev tools. – McCrockett Jul 19 '21 at 13:26

McCrockett · Accepted Answer · 2022-02-18T18:13:41.017

Took me a long time, but I learned that the problem was caused by

"@angular-devkit/build-angular": "12.0.3"

When I switched it to

"@angular-devkit/build-angular": "^0.1002.3"

It seemed to work fine.

UPDATE: I believe this problem came from upgrading to Angular 12. I have since upgraded the same application to 12.2.13 (including @angular-devkit/build-angular) but was sure to add a development environment since Angular 12 uses the 'production' configurations by default. Here's a link that helped me fix the issue: https://stackoverflow.com/a/67701276/1809219

Can't Debug Angular Project, Missing .Map Files

2 Answers2