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...
You need to enable the sourcemaps in your angular.json file, in the configuration you are currently using (not recommended for production).
You can also declare this with the cli:
ng serve --source-map=true
Update:
I think the problem is that you are overwritten the serve
options with your production
configuration:
"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"
^^^^^^^^^^
}
}
},
So, try changin your production
configuartion:
"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"
}
]
},
...
You need to change the --source-map
to true in your configuration file. (dev & prod)
"configurations": {
"production": {
...
"sourceMap": false,
...
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.