W92 W92 - 2 months ago 12
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

wwwroot
contains only local files like
*.html, *.css, *.js
and so on. Files with extension
*.ts
are in other folder names
scripts
. 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": [
"node_modules"
]
}


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

app.js.map:

{
"version": 3,
"file": "app.js",
"sourceRoot": "",
"sources": [
"../../scripts/app.ts"
],
"names": [
"AppComponent",
"AppComponent.constructor"
],
"mappings": "(...)"
}


List of
sources
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
script/app.ts
and
script/boot.ts
are empty:
enter image description here

When i try to open
script/app.ts
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..

TSV TSV
Answer

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": [
    "node_modules"    
  ]
}

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.

Comments