javascript - 将 Angular 8 开发工具更新到 15 开发工具后,调试器无法在浏览器开发工具上运行

标签 javascript angular typescript package.json javascript-debugger

我已将 Angular 从版本 8 更新到版本 15,并且调试器无法在任何浏览器开发工具上运行任何人都可以建议我缺少什么是源映射出了问题吗?

这是package.json

 "dependencies": {
    "@angular/animations": "^15.1.0",
    "@angular/cdk": "~15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/forms": "^15.1.0",
    "@angular/material": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    "@angular/service-worker": "~8.0.0",
    "@ngrx/store": "^7.4.0",
    "akbari-date-picker": "^3.0.5",
    "angular-toastify": "^1.0.3",
    "angular-toastr": "^2.1.1",
    "bootstrap": "^5.1.3",
    "file-saver": "^2.0.5",
    "hammerjs": "^2.0.8",
    "highcharts": "^9.3.1",
    "mb-suites": "file:local_node_modules/mb-suites",
    "ngx-bootstrap": "^5.5.0",
    "ngx-draggable-dom": "^2.1.2",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-mask": "^11.1.5",
    "ngx-skeleton-loader": "^2.9.1",
    "ngx-virtual-scroller": "^4.0.3",
    "persian-tools2": "^1.5.0",
    "persianjs": "^0.4.0",
    "postcss-loader": "^3.0.0",
    "react-toastify": "^7.0.3",
    "rxjs": "~6.4.0",
    "sass-convert": "^0.5.2",
    "simple-keyboard": "^2.20.5",
    "tslib": "^2.3.0",
    "xlsx": "^0.17.4",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.1.4",
    "@angular/cli": "~15.1.4",
    "@angular/compiler-cli": "^15.1.0",
    "@angular/language-service": "~8.0.0",
    "@types/jasmine": "~4.3.0",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "protractor": "~5.4.0",
    "tslint": "~5.15.0",
    "typescript": "^4.8.2"
  }

这是 package-lock.json

"dependencies": {
        "@angular/animations": "^15.1.0",
        "@angular/cdk": "~15.1.0",
        "@angular/common": "^15.1.0",
        "@angular/compiler": "^15.1.0",
        "@angular/core": "^15.1.0",
        "@angular/forms": "^15.1.0",
        "@angular/material": "^15.1.0",
        "@angular/platform-browser": "^15.1.0",
        "@angular/platform-browser-dynamic": "^15.1.0",
        "@angular/router": "^15.1.0",
        "@angular/service-worker": "~8.0.0",
        "@ngrx/store": "^7.4.0",
        "akbari-date-picker": "^3.0.5",
        "angular-toastify": "^1.0.3",
        "angular-toastr": "^2.1.1",
        "bootstrap": "^5.1.3",
        "file-saver": "^2.0.5",
        "hammerjs": "^2.0.8",
        "highcharts": "^9.3.1",
        "mb-suites": "file:local_node_modules/mb-suites",
        "ngx-bootstrap": "^5.5.0",
        "ngx-draggable-dom": "^2.1.2",
        "ngx-infinite-scroll": "^10.0.1",
        "ngx-mask": "^11.1.5",
        "ngx-skeleton-loader": "^2.9.1",
        "ngx-virtual-scroller": "^4.0.3",
        "persian-tools2": "^1.5.0",
        "persianjs": "^0.4.0",
        "postcss-loader": "^3.0.0",
        "react-toastify": "^7.0.3",
        "rxjs": "~6.4.0",
        "sass-convert": "^0.5.2",
        "simple-keyboard": "^2.20.5",
        "tslib": "^2.3.0",
        "xlsx": "^0.17.4",
        "zone.js": "~0.12.0"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "^15.1.4",
        "@angular/cli": "~15.1.4",
        "@angular/compiler-cli": "^15.1.0",
        "@angular/language-service": "~8.0.0",
        "@types/jasmine": "~4.3.0",
        "@types/node": "~8.9.4",
        "codelyzer": "^5.0.0",
        "jasmine-core": "~4.5.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.0.0",
        "protractor": "~5.4.0",
        "tslint": "~5.15.0",
        "typescript": "^4.8.2"
      }
    },

我确实希望调试器击中断点。

最佳答案

终于明白是怎么回事了;看来项目配置未正确迁移并使用 angular.json 文件中的此代码块进行修复 architect>build>options>

 `"optimization": false,
  "sourceMap": true,
  "namedChunks": true,
  "extractLicenses": false,
  "vendorChunk": false,
  "buildOptimizer": false,`

关于javascript - 将 Angular 8 开发工具更新到 15 开发工具后,调试器无法在浏览器开发工具上运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75604208/

相关文章:

angular - <SomeModule> 不是 Angular 模块

css - 在 Angular 中导入全局 css 文件会导致 Webpack 发出巨大的模块包

angular - 创建没有文件夹的组件

javascript - d3 实现适用于 firefox/chrome,但不适用于 iPad

javascript - 带有占位符文本的文本框,该字符逐个字符消失

Javascript 不替换或修改原始实例

javascript - 将条件类型映射回联合类型?

javascript - 流体动力学模拟,有障碍物

typescript - 我可以在编译时通过装饰器向类添加属性吗?

javascript - 检测 Angular 4 中组件的变化