VS2013 Typescript: Referencing and debugging with multiple projects

Question

I've made a library written in TypeScript, and now I want to make a sample app for this.

To do that, I added a new project to my current Visual Studio solution.

The folder tree is like this:

SamiTS
├───SamiTS
└───SamiTSSampleApp

and I added a reference to my library using:

///<reference path='../SamiTS/samiconverter.ts' />

Now I can build them together well, but I cannot debug with Visual Studio as it sets SamiTSSampleApp folder as the root directory so that I cannot access SamiTS folder with '../SamiTS'

Can I solve this problem, without copying my library (composed of multiple files, compiled into one single file) to the new folder?

Answer 1

I used an after build task to copy the file over. Now I use grunt-ts to generate the single merged file.

Answer 2

Copying the files from another project is an accident waiting to happen because you're creating duplicate files (if you edit the duplicated file, your changes will be overwritten on the next build).

In order to combine the files, I prefer to use Visual Studio 2013's built-in TypeScript Combine method over GruntTS. To do that, go to your web application's Properties | TypeScript Compile tab, check the Combine JavaScript output into file box, and specify the merged file destination (e.g. $(ProjectDir)Scripts\App.js).

Also, I don't think GruntTS will properly set the Source Map references in different projects when merging into a single project file.

Please see this question/answer indicating what has worked great for both solid code maintenance and debugging in Visual Studio, Chrome, and Firefox, while still retaining the ability to combine shared code with the referencing projects' code (important, for example, if you need to target different ECMAScript versions): Visual Studio: How to debug TypeScript in a shared project using IIS Express and cross-project references (no linking or duplicating files)