Javascript files are mapped to TypeScript compiled code instead of the original code

[aminanan]

🐞 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?

[alan-agius4]

Hi, I tried this and I cannot reproduce. I am not sure from where that import from tslib came from however, in your sourcemap, I can see the export which does mean that it's pointing to the original code.

Here what I got by following your reproduction steps

Sourcemap contents

function add(a, b) {
    return a + b;
}
export { add };
//# sourceMappingURL=test.js.map

Actual transpiled JS contents

/*! exports provided: add */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });
function add(a, b) {
    return a + b;
}
//# sourceMappingURL=test.js.map

[aminanan]

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.map
Also, the empty line before the export is removed compared to the original code.

[aminanan]

Hi, did you need more info, or the issue is clear now?

[aminanan]

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:

async function add(a,b){
  return a+b;
}

export {
  add
}

The sourcemap contents becomes

import * as tslib_1 from "tslib";
function add(a, b) {
    return tslib_1.__awaiter(this, void 0, void 0, function* () {
        return a + b;
    });
}
export { add };
//# sourceMappingURL=testjs.js.map

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]

Hi @alan-agius4. Can you please tell me if there is any progress on the issue ? I’m 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]

Hi @Hakimon, unfortunately we did have time yet to investigate the issue.