The empty content of ts file in browse

Question

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:

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:

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:

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:

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..

Answer 1

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.

Answer 2

If you're using Chrome and not serving original .ts files along with .js files, you can point Chrome to a folder there original source files are kept without modifying server's configuration.

1. Open Dev Tools and navigate to the Sources tab.
2. Ensure that the FS tree is expanded (click button in top left corner if not).
3. Right-click anywhere in the tree panel and select Add folder to workspace.
4. Select the folder where .ts sources are located.
5. A security confirmation bar will appear in the main viewport, accept it.

Answer 3

The problem I see is that in your wwwroot directory you only have served up and deployed the .js and .map files. The problem is the other piece of the puzzle for the .map file is the .ts file itself.

I had this same problem with the blank .ts files being displayed. For debugging purposes, you should have either tsconfig.json or your task runner (i.e. gulp.js) copy out not just the transpiled .js files but also the .ts files. I wrote a blog post detailing the comprehensive steps required in an ASP.NET Core site to ensure this happens if you need a deeper explanation:

Ensuring TypeScript Files Are Served to the Browser for Debugging Using ASP.NET Core