W92 W92 - 1 year ago 111
TypeScript Question

The empty content of ts file in browse

I had created a project in ASP.NET-Core. The project has been configured, that for folder

contains only local files like
*.html, *.css, *.js
and so on. Files with extension
are in other folder names
. All looks like:

enter image description here

Settings for tsconfig.json:

"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../wwwroot/appScripts/",
"removeComments": false,
"sourceMap": true,
"target": "es5"
"exclude": [

Everything is good compile. As you can see: the property sourceMap (in tsconfig.json) has value true, well at the end of each
(created by **.ts*) is added sourceMapping:
enter image description here


"version": 3,
"file": "app.js",
"sourceRoot": "",
"sources": [
"names": [
"mappings": "(...)"

List of
points for good file ts:

enter image description here

I stared the project in Chrome / Chrome Canary (with / without debug - the same effect). Then go to source (F12 -> Sources). I see that the files
are empty:
enter image description here

When i try to open
in IE11 i get the error:

Could not locate http://localhost:61272/appScripts/../../scripts/app.ts specified in source map http://localhost:61272/appScripts/app.js.map.

Maybe you know what's wrong? I think that this issue create another problem: I can't debug..

Answer Source

The thing is that a browser can not find source files referenced in map file.

The sourceRoot option can help you to specify sources folder.

I'm using "inlineSourceMap" and "inlineSources" options in debug mode to overcome "source paths hell".

Update 1

Sample minimal tsconfig.json file to generate inline source maps:

  "compilerOptions": {
    "target": "es5",
    "inlineSourceMap": true,
    "inlineSources": true
  "exclude": [

You will get something like

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLmpz...

in output ".js" files.

But be aware of ignore of tsconfig.json file by Visual Studio 2015 under some circumstances (e.g. Visual Studio 2015 - tsconfig.json - TypeScript 1.6.0 Beta)

To make it just work via VS, I've added "tsc" on post-build step. To get files complied I build the project.

But for production I'd recommend you to use Grunt or Gulp build tasks, or Webpack.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download