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

If I create a new Angular 13 project with $ ng new my-test-app and add

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

to app.component.ts, then do $ ng serve and open the browser..
"Hello there" is logged in the console, but it says it's coming from main.js instead of app.component.ts

Is this expected behavior? And does anyone know how to change it?

angular.json snippet below

"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"
        },
    ....

Edit: Seems like the issue is with my chrome browser. It displays the files correctly in the firefox console. Will add a solution when I figure out why

CodePudding user response：

this isn't the default behavior expected from a fresh project generated with the cli, somehow source maps got turned off in your build configuration... in angular.json, under projects.[your-project].architect.build.configurations.development set

"sourceMap": true

this assumes your angular.json has a development build config and the ng serve command runs with the development build as it's target, which may not be the case, as again, your configuration file is for some reason non standard. If this doesn't work, may need to see the angular.json file to fix it.

CodePudding user response：

"Enable Javascript source maps" was not enabled in my Chrome Dev Tools Settings (F1).
Enabling it solved the problem.