I am trying to configure an app so that the chrome dev tools console refers to the typescript sources rather than the compiled javascript sources.
I have added the following line in an ngOnInit of our Dashboard component
throw new TypeError('Badaboomm!!');
Unfortunately chrome points me to the js file:
DashboardComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Badaboomm!!
at DashboardComponent.ngOnInit (app-app-module.js:64409)
at checkAndUpdateDirectiveInline (provider.ts:212)
at checkAndUpdateNodeInline (view.ts:429)
at checkAndUpdateNode (view.ts:389)
Here is our angular.json configuration:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"oneval": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "ovl",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"src/styles/_styles.scss",
"node_modules/ag-grid/dist/styles/ag-grid.css",
"node_modules/ag-grid/dist/styles/theme-fresh.css",
"node_modules/ag-grid/src/styles/ag-theme-material.scss",
"node_modules/ag-grid/src/styles/ag-theme-balham.scss",
"node_modules/flag-icon-css/css/flag-icon.css"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles",
"src/styles/global",
"src/styles/overrides",
"src/styles/utils"
]
},
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"int": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.int.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"qua": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qua.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"sta": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.sta.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "oneval:build",
"aot": false,
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": true
}
},
"configurations": {
"production": {
"browserTarget": "oneval:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "oneval:build"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
}
}
}
}
},
"defaultProject": "oneval"
}
and out tsconfig.json configuration:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"downlevelIteration": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"],
"types": ["jest"],
"paths": {
"@admin/*": ["src/app/admin/*"],
"@core/*": ["src/app/core/*"],
"@cache/*": ["src/app/cache/*"],
"@dashboard/*": ["src/app/dashboard/*"],
"@i18n/*": ["src/app/i18n/*"],
"@material/*": ["src/app/material/*"],
"@project-definition/*": ["src/app/project-definition/*"],
"@prototype/*": ["src/app/prototype/*"],
"@shared/*": ["src/app/shared/*"],
"@validation/*": ["src/app/validation/*"],
"@renault-shared/*": ["src/app/validation/renault/shared/*"],
"@renault-applied/*": ["src/app/validation/renault/applied/*"],
"@renault-standard/*": ["src/app/validation/renault/standard/*"],
"@nissan/*": ["src/app/validation/nissan/*"]
}
}
}
I strongly suspect this issue started occurring after a ng update... Otherwise, I tried to create another angular app with ng new someApp and the issue does not occur. We use angular 8.
Can anyone please help?
edit 1: The issue (js sources instead of ts sources) appears especially upon force reload of the page...
edit 2: As mentioned in one of my comments in the chat, the issue seems to be related to the use of async/await and promises. The issue does not occur until async/await/promises are used.
edit 3: I have tried reproducing the issue by using async/await/promises on a new angular app, to no avail...
