Repository navigation
Javascript files are mapped to TypeScript compiled code instead of the original code聽#15804
Description
馃悶 Bug report
Command (mark with an x)
- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc
Description
Javascript files are mapped to transpiled code instead of the original code.
馃敩 Minimal Reproduction
Create new app
ng new testsourcemap
cd testsourcemap
Add '"allowJs": true' in compilerOptions section of 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": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
],
"allowJs": true,
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
Create file testjs.js in src/app
function add(a,b){
return a+b;
}
export {
add
};
Change app.component.ts to
import { Component } from '@angular/core';
import * as test from './testjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testsourcemap';
constructor() {
let add = test.add;
}
}
馃敟 Exception or Error
The mapped file 'webpack:///./src/app/testjs.js' under Chrome shows the following code
import * as tslib_1 from "tslib";
function add(a, b) {
return a + b;
}
export { add };
//# sourceMappingURL=testjs.js.map
馃實 Your Environment
Angular CLI: 8.3.8
Node: 10.15.3
OS: win32 x64
Angular: 8.2.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.803.8
@angular-devkit/build-angular 0.803.8
@angular-devkit/build-optimizer 0.803.8
@angular-devkit/build-webpack 0.803.8
@angular-devkit/core 8.3.8
@angular-devkit/schematics 8.3.8
@angular/cli 8.3.8
@ngtools/webpack 8.3.8
@schematics/angular 8.3.8
@schematics/update 0.803.8
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2
Anything else relevant?
Activity
alan-agius4 commentedon Oct 11, 2019
Hi, I tried this and I cannot reproduce. I am not sure from where that
importfromtslibcame from however, in your sourcemap, I can see theexportwhich does mean that it's pointing to the original code.Here what I got by following your reproduction steps
Sourcemap contents
Actual transpiled JS contents
aminanan commentedon Oct 11, 2019
Hi, by transpiled code I mean the code compiled by Typescript and not the final code generated in main.js. If the Sourcemap content above was the original code, why there is the added code below in the last line.
//# sourceMappingURL=test.js.mapAlso, the empty line before the export is removed compared to the original code.
[-]Javascript files are mapped to transpiled code instead of the original code[/-][+]Javascript files are mapped to TypeScript compiled code instead of the original code[/+]aminanan commentedon Oct 31, 2019
Hi, did you need more info, or the issue is clear now?
aminanan commentedon Nov 5, 2019
To better show the difference between the original file and the TypeScript compiled file, I added async to the add function in the testjs.js file above, as follows:
The sourcemap contents becomes
Here we can see that the sourcemap is mapped to the TypeScript compiled file and not the original file. If we change the file name extension to testjs.ts, instead of testjs.js, we get exactlly the content of the original file.
aminanan commentedon Nov 24, 2019
Hi @alan-agius4. Can you please tell me if there is any progress on the issue ? I鈥檓 integration the PDF.js viewer (written in JavaScript) in an Angular project. When debugging with Chrome DevTools I can see the TypeScript compiled code and not the original files and there is a big difference between the two versions compared to the simple examples above. The problem is when debugging with Visual Studio 2017. In this case, it is impossible to step over the code since Visual studio shows the original code but steps over the Typescript compiled code (i.e. breakpoints cannot be set or sometimes can be set over comments).
Thanks.
alan-agius4 commentedon Nov 26, 2019
Hi @Hakimon, unfortunately we did have time yet to investigate the issue.
alan-agius4 commentedon Dec 2, 2019
The issue seems to be caused by these 2 test patterns, which doesn't cover
jsfiles.angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts
Line 124 in 2b22e73
angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts
Line 108 in 2b22e73
ceefour commentedon Apr 6, 2020
@aminanan I also get this issue, but in Create-React-App with TypeScript.
I have tried
"allowJs": falsebut problem persists:(note: my case may or may not be relevant to this issue, but I hope it helps to know that this problem is real)
One noticeable thing is the file is
buildQuery.tsbut it's clearly transpiled code, not original TypeScript. Additionally it said "source mapped from 0.chunk.js".angular-automatic-lock-bot commentedon Dec 6, 2020
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.