This project has been upgraded from Angular 6 to Angular 12, one version at a time. The project compiles and works, but I cannot debug it in Chrome dev tools anymore. I do not see my source code. I tried to 'Add folder to Workspace' in Chrome, but then my file gets locked. Obviously, I'm doing something wrong. The Chrome version I have is Version 108.0.5359.95 (Official Build) (64-bit)
I have tried to change my angular.json after reading another post Angular 12 Debug source code not available in Chrome Developer tools was fine in Angular 11
but it is not working for me. Here's my angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app-name": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"allowedCommonJsDependencies": [
"xlsx",
"rxjs/BehaviorSubject",
"rxjs/add/observable/throw",
"rxjs/add/operator/catch",
"rxjs/Observable",
"rxjs/operators/map",
"rxjs/operators/tap"
],
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
},
"development": {
"optimization": false,
"sourceMap": true
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app-name:build"
},
"configurations": {
"production": {
"browserTarget": "app-name:build:production"
},
"development": {
"browserTarget": "app-name:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app-name:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
],
"styles": [
{
"input": "node_modules/@progress/kendo-theme-default/dist/all.css",
"inject": true
},
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.css"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"app-name-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "app-name:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "app-name",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"style": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
and my package.json
{
"name": "hierarchy",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"prodbuild": "ng build --configuration production --aot=true --output-hashing none",
"build": "ng build --output-hashing none",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.2.15",
"@angular/common": "^12.2.15",
"@angular/compiler": "^12.2.15",
"@angular/core": "^12.2.15",
"@angular/forms": "^12.2.15",
"@angular/platform-browser": "^12.2.15",
"@angular/platform-browser-dynamic": "^12.2.15",
"@angular/router": "^12.2.15",
"@progress/kendo-angular-buttons": "^7.0.2",
"@progress/kendo-angular-common": "^2.0.2",
"@progress/kendo-angular-dateinputs": "^6.0.0",
"@progress/kendo-angular-dialog": "^6.0.0",
"@progress/kendo-angular-dropdowns": "^6.0.0",
"@progress/kendo-angular-excel-export": "^4.0.3",
"@progress/kendo-angular-grid": "^6.0.1",
"@progress/kendo-angular-inputs": "^8.0.0",
"@progress/kendo-angular-intl": "^3.1.2",
"@progress/kendo-angular-l10n": "^3.0.3",
"@progress/kendo-angular-label": "^3.1.2",
"@progress/kendo-angular-pdf-export": "^3.0.3",
"@progress/kendo-angular-popup": "^4.0.4",
"@progress/kendo-angular-tooltip": "^3.1.3",
"@progress/kendo-angular-treeview": "^6.0.0",
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-drawing": "^1.16.1",
"@progress/kendo-licensing": "^1.2.1",
"@progress/kendo-theme-default": "latest",
"angular2-notifications": "^12.0.0",
"bootstrap": "^4.3.1",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.12",
"dns-packet": "^5.3.0",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"npm-check": "^5.9.2",
"popper.js": "^1.16.1",
"rxjs": "^6.6.7",
"rxjs-compat": "6.2.2",
"sass": "^1.49.0",
"tslib": "^2.0.0",
"web-animations-js": "^2.3.2",
"xlsx": "^0.14.5",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.15",
"@angular/cli": "^12.2.15",
"@angular/compiler-cli": "^12.2.15",
"@angular/language-service": "^12.2.15",
"@angular/localize": "^12.2.15",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.11",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~5.0.1",
"tslint": "~6.1.0",
"typescript": "~4.3.5",
"webpack": "^5.30.0"
}
}
Also, I'm building using command ng build --watch and it is still working. Is this command still appropriate or would you suggest something else?