sourceMap set to true everywhere, but no typescript sources appearing under my Firefox browser debugger (Angular 14)

Question

source maps are expected to come quite instantaneously on web browsers, when starting an Angular application in dev mode, with ng serve. Provided "sourceMap": true is sat, according to what I read over the Internet.

This doesn't appear to cause troubles to most developpers.
But, I'm not among the lucky ones, and my Firefox browser doesn't show the typescript counterparts of the javascript that Angular produced.

I'm using Angular 14.

Did I missed to parameterize somewhere, something?

Most of what is below was written by angular plugins. But maybe something is inaccurate or lacking.

Can you help me?

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "skipLibCheck": true,
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "etude": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/etude",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/ol/ol.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "namedChunks": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "etude:build"
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "etude: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": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "etude:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "etude:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false
  }
}

package.json

{
  "name": "etude",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "buildProduction": "ng build --configuration production",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "openapi": "openapi-generator generate -g typescript-angular -i ../../../../metier-et-gestion/dev/GenerationOpenAPI/openapi/openapi.json -o ./openapi --skip-validate-spec"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.12",
    "@angular/common": "^14.2.12",
    "@angular/compiler": "^14.2.12",
    "@angular/core": "^14.2.12",
    "@angular/forms": "^14.2.12",
    "@angular/platform-browser": "^14.2.12",
    "@angular/platform-browser-dynamic": "^14.2.12",
    "@angular/router": "^14.2.12",
    "@openapitools/openapi-generator-cli": "^1.0.13-4.3.1",
    "ol": "^7.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.4.1",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^14.1.0",
    "@angular-devkit/build-angular": "^14.2.10",
    "@angular/cli": "^14.2.10",
    "@angular/compiler-cli": "^14.2.12",
    "@angular/language-service": "^14.2.12",
    "@types/jasmine": "~4.3.1",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~4.5.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~10.9.1",
    "tslint": "~6.1.0",
    "typescript": "~4.6.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "overrides": {
    "codelyzer": {
      "@angular/core": ">=14.0.0",
      "@angular/compiler": ">=14.0.0"
    }
  }
}

Well angular uses webpack to build or serve. So you should look in the source navigation tab for webpack and inside webpack you should find your .ts files. Hotkey user in Chrome could press CTRL + P and type in the name of your file and the browser will search for it. — Mehyar Sawas
– Mehyar Sawas, Commented Dec 22, 2022 at 7:00
@MehyarSawas If I understand you well, I have something to install on my Firefox side in order to make webpack start working and show the typescript sources that my Angular ng serve command is "one way or another" already emitting/linking? — Marc Le Bihan
– Marc Le Bihan, Commented Dec 22, 2022 at 8:39
No, it is already there in the browser but not und the root path of your project, instead it is under the webpack source — Mehyar Sawas
– Mehyar Sawas, Commented Dec 22, 2022 at 10:23
@MehyarSawas I don't see clearly what I should do to finish. Could you write an answer to show me my missing steps clearer? It would be nice from you, and I would appreciate it greatly! — Marc Le Bihan
– Marc Le Bihan, Commented Dec 22, 2022 at 11:06
Before I write my answer, do you see "webpack://" under sources on the left sidebar in your developer tool? Or share a screenshot of the whole area. — Mehyar Sawas
– Mehyar Sawas, Commented Dec 22, 2022 at 11:49

Marc Le Bihan · Accepted Answer · 2022-12-23 05:14:55Z

I've succeeded in my researches, glad to your help.

Angular 14 isn't working the same manner than previous versions.
Two changes have to be done, both in angular.json file:

Comparing to my opening post, to resolve my issue, I had to:

On architect, build section, add a development configuration:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/etude",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "aot": true,
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      "styles": [
        "node_modules/ol/ol.css",
        "src/styles.css"
      ],
      "scripts": []
    },
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
          }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": true,
        "namedChunks": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "2mb",
            "maximumError": "5mb"
          },
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb",
            "maximumError": "10kb"
          }
        ]
      },

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

On its serve part, do this change:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "etude:build"
  },

  "configurations": {
    "production": {
      "browserTarget": "etude:build:production"
    },

    "development": {
      "browserTarget": "etude:build:development"
    }
  },

  "defaultConfiguration": "development"
}

And then, a classical ng serve shows the typescript files, eventually.

Collectives™ on Stack Overflow

sourceMap set to true everywhere, but no typescript sources appearing under my Firefox browser debugger (Angular 14)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related