【问题标题】:Unable To see My .ts files inside sources in Developer tools in my Angular 12 application无法在我的 Angular 12 应用程序的开发人员工具的源中查看我的 .ts 文件
【发布时间】:2021-10-01 10:04:03
【问题描述】:

最近一次 Angular 12 升级后,我无法在开发工具的源代码中看到我的 .ts 文件。似乎没有加载 web pack 捆绑器。 angular.json 中的 sourceMap 是真的,但文件没有加载。任何人都请让我知道我需要在这里检查的所有内容。这是一个不便,因为我通常通过浏览器进行调试。以下是我的 Angular Json 文件的内容。

       {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "load-board": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "ntg-load-board",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/out",
            "index": "src/index.html",
            "main": "src/main.single-spa.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/@ntgfreight/ui-components/style/style.scss",
              "src/styles.scss"
            ],
            "scripts": [],
            "customWebpackConfig": {
              "path": "extra-webpack.config.js",
              "libraryName": "load-board",
              "libraryTarget": "umd"
            }
          },
          "configurations": {
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": true,
              "namedChunks": true,
              "extractLicenses": false,
              "vendorChunk": true,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },
            "qa": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.qa.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },
            "stg": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.stg.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "load-board:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "load-board:build:production"
            },
            "development": {
                "browserTarget": "load-board:build:dev"
             }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "load-board:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/@ntgfreight/ui-components/style/style.scss",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "load-board:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "load-board:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "load-board",
  "cli": {
    "analytics": false
  }
}

enter code here

【问题讨论】:

    标签: javascript angular typescript


    【解决方案1】:

    您需要更新您的服务部分以将开发browserTarget 包含到开发配置中:

    "serve": {
              "builder": "@angular-builders/custom-webpack:dev-server",
              "options": {
                "browserTarget": "load-board:build"
              },
              "configurations": {
                "production": {
                  "browserTarget": "load-board:build:production"
                },
                "development": {
                  "browserTarget": "load-board:build:dev"
               }
              }
            },
    

    并使用以下命令运行您的项目:

    ng serve load-board --configuration development
        
    

    阅读有关 Angular12 的更多信息:https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49

    【讨论】:

    • 这没有帮助。我已经用更新的 Angular json 文件编辑了我的问题。
    • 检查更新的答案。
    • 我在发表最后一条评论后就意识到了这个错字。但是,问题仍然没有解决。请在已编辑的问题中查看我更新的 Angular.json。顺便说一句,到目前为止,我非常感谢您的帮助,如果我们能解决这个问题,我们将不胜感激,因为目前很难调试。
    • 您需要像 Angular 12 一样在开发模式下运行项目,它默认运行生产配置。检查更新的答案。
    • 以下是我用来托管我的应用程序的脚本。但这似乎不起作用。 "build:local": "ng build load-board --configuration development", "start:local": "ng s --project load-board --proxy-config proxy-dev.config.json --disable-host -check --port 4206 --live-reload false",
    【解决方案2】:

    在我的Angular.json"configurations" 部分添加以下插件:

    "development": {
        "buildOptimizer": false,
        "optimization": false,
        "vendorChunk": true,
        "extractLicenses": false,
        "sourceMap": true,
        "namedChunks": true
    },
    

    并使用显式--configuration development" 或仅在"build""serve" 部分提供"defaultConfiguration": "development",我可以在我的DevTools 中看到.ts 文件。确保您正在查看 DevTools 的正确路径:webpack://./src/app/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-04-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多