更新到 webpack 5，一直无法调试任何 ts 或 js 文件

如何解决更新到 webpack 5，一直无法调试任何 ts 或 js 文件

今天我的 package.json 中的 angular 依赖项有问题，所以我决定全部更新它们。在这样做的过程中，我从 webpack v4 升级到了 webpack v5。我没有意识到我会失去与 crypto-js 的兼容性。在这里搜索和谷歌后，我终于想出了以下文件。

我当前的问题：一切正常，除了以下问题：

1. ts 文件不会在开发工具中加载。
2. 我的调试器语句没有加载。 （唯一的调试方法是使用断点）
3. 我无法使用发布的任何教程在 Visual Studio 2019 中调试我的 js/ts 文件。

请告诉我我在这里做错了什么。非常感谢所有帮助！谢谢！

package.json：

{
  "name": "royal_competition","version": "1.0.0","scripts": {
    "ng": "ng","start": "echo Starting... && ng serve","build": "ng build","build:production": "ng build --configuration production","build:ssr": "ng run royal_competition:server:dev","test": "ng test","lint": "ng lint","e2e": "ng e2e"
  },"private": true,"dependencies": {
    "@angular/animations": "^12.0.0","@angular/cdk": "12.0.4","@angular/common": "^12.0.0","@angular/compiler": "12.0.3","@angular/compiler-cli": "12.0.3","@angular/core": "^12.0.3","@angular/flex-layout": "^11.0.0-beta.33","@angular/forms": "^12.0.0","@angular/material": "12.0.4","@angular/platform-browser": "12.0.3","@angular/platform-browser-dynamic": "12.0.3","@angular/platform-server": "12.0.3","@angular/router": "11.0.9","@nguniversal/module-map-ngfactory-loader": "8.2.6","aspnet-prerendering": "^3.0.1","bootstrap": "^4.3.1","core-js": "^3.14.0","hammerjs": "^2.0.8","jquery": "^3.5.1","oidc-client": "^1.9.1","popper.js": "^1.16.0","rxjs": "^6.5.3","stream-browserify": "^3.0.0","ts-loader": "^9.2.3","webpack": "^5.38.1","zone.js": "~0.11.4"
  },"devDependencies": {
    "@angular-builders/custom-webpack": "^12.1.0","@angular-devkit/build-angular": "^12.0.3","@angular/cli": "12.0.3","@angular/language-service": "11.0.9","@types/googlemaps": "^3.43.3","@types/jasmine": "~3.4.4","@types/jasminewd2": "~2.0.8","@types/node": "~12.11.6","codelyzer": "^5.2.0","crypto-browserify": "^3.12.0","jasmine-core": "~3.5.0","jasmine-spec-reporter": "~4.2.1","karma": "^6.3.3","karma-chrome-launcher": "~3.1.0","karma-coverage-istanbul-reporter": "~2.1.0","karma-jasmine": "~2.0.1","karma-jasmine-html-reporter": "^1.4.2","typescript": "^4.2.4"
  },"optionalDependencies": {
    "protractor": "~5.4.2","ts-node": "~8.4.1","tslint": "~5.20.0"
  }
}

tsconfig.json:

{
  "compileOnSave": true,"compilerOptions": {
    "baseUrl": "./","paths": {
      "stream": [
        "node_modules/stream-browserify"
      ],"crypto": [
        "node_modules/crypto-browserify"
      ]
    },"module": "esnext","outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"target": "es2015","typeRoots": [
      "node_modules/@types"
    ],"lib": [
      "es2017","dom"
    ]
  }
}

angular.json（唯一重要的部分）：

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser","options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            },"progress": true,

custom-webpack.config.js:

var webpack = require('webpack');

module.exports = {
  mode: "development",devtool: "inline-source-map",output: {
    filename: "static/js/[name].js"
  },resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),"stream": require.resolve("stream-browserify")
    },extensions: [".ts",".tsx",".js"]
  },plugins: [
    new webpack.sourceMapDevToolPlugin({
      modulefilenameTemplate: 'file:///[absolute-resource-path]',sourceRoot: ''
    })
  ],module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/,loader: "ts-loader" }
    ]
  }
};