Angular 13 ng serve -> console.log() 不显示正确的文件名

Question

如果我使用 $ ng new my-test-app 创建一个新的 Angular 13 项目并添加

constructor() {
  console.log('Hello there');
}

到app.component.ts，然后执行$ ng serve并打开浏览器..
“你好”已记录在控制台中，但它表示它来自 main.js 而不是 app.component.ts

这是预期的行为吗？有谁知道如何更改它？

angular.json 下面的片段

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-testy-app-2",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "my-testy-app-2:build:production"
            },
            "development": {
              "browserTarget": "my-testy-app-2:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
    ....

编辑： 问题似乎出在我的 chrome 浏览器上。它在 firefox 控制台中正确显示文件。当我弄清楚为什么时会添加解决方案

Answer 1

这不是使用 cli 生成的新项目所期望的默认行为，源映射在您的构建配置中以某种方式被关闭...在 angular.json 中，在项目下。[your-project].architect.build.configurations.development 设置

"sourceMap": true

这假设您的 angular.json 具有开发构建配置，并且 ng serve 命令以开发构建作为目标运行，但情况可能并非如此，同样，您的配置文件用于某些原因不标准。如果这不起作用，可能需要查看 angular.json 文件来修复它。

Answer 2

“启用 Javascript 源映射” 在我的 Chrome 开发工具设置中未启用（F1 ).
启用它解决了问题。

Angular 13 ng serve -> console.log() 不显示正确的文件名

Angular 13 ng serve -> console.log() does not display proper filenames

angular

angular-cli

angular13

angular-config