Visual Studio 2015, Typescript and angular2 with tsconfig.json

Question

I've been trying out the latest build of Angular2 (2.0.0-alpha.44) along with Visual Studio 2015. Here are the versions of everything I'm using that are relevant to this issue:

• Visual Studio 2015
• Asp.NET 5
• Typescript 1.6
• Resharper 10
• Angular 2.0.0-alpha.44

Here's my solution:

All my typescript is in the /Ts directory, which also has a tsconfig.json file. This makes Visual Studio display a 'typescript virtual project'

As soon as I put the import {Component, bootstrap} from "angular2/angular2"; line into my main.ts, it finds the angular2 library files in my node_modules directory and displays those too (not sure what the flattened directory structure is all about though)

At this point, the typescript compiler will compile that single file (main.ts). However, it is no longer compiling any of the other .ts files in that folder, (which it was prior to bringing angular2 in), and it doesn't place the output in the specified outFile location from my tsconfig.json

Resharper is indicating there's a problem finding the Component and bootstrap references, yet the tooltip also seems to understand what the signatures for those are. Not sure how both can be true.

If I remove angular2 from the equation, typescript happily follows all the settings in my tsconfig.json, compiles all the .ts files into app.js and puts it in ../wwwroot/js/app.js

Has anyone had any success getting VS2015, typescript, and angular2 to play nicely together?

Answer 1

From TypeScript Handbook:

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module.

and

Just as there is a one-to-one correspondence between JS files and modules, TypeScript has a one-to-one correspondence between module source files and their emitted JS files. One effect of this is that it's not possible to use the --outFile compiler switch to concatenate multiple module source files into a single JavaScript file.

I believe this is the reason you have output when you "remove angular2 from the equation". Modules and outFile are incompatible. Use outDir instead.

Also, I have tried to put the tsconfig file in a subfolder but Visual Studio didn't respect it, so I moved it back to the project root.

Answer 2

I have been trying for a couple weeks now. It seems that the d.ts files are still incorrect. If you notice, the definition files are still on alpha 38, or 39.

Even if the definition files weren't on alpha 38, or 39, and created from the correct version, I still don't think you could get it to work since it is in no way shape or form solidified, and its still missing a bunch of stuff I believe.

The error you are getting I have not seen yet, and I do not use resharper (though I don't think this should really be causing your problems). What I can say, is that I did have success with alpha 26, found here:

https://github.com/microsoft/ngconf2015demo

Its probably not going to help you, since it is such an early alpha build.

Also, in the newer alphas, they have begun creating the UpdateAdapter, and an example can be found here:

http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html

This is a very important component, since everyone trying to early adopt is going to want to utilize angular1 directives inside angular2.

I cannot get this to work either (even though this is a super new alpha build). The definition files are still only at 39, and there's some disparity between them. Even if I import his entire project as is, there are many missing references and exports. There's not much that can be done about this, except try and modify the d.ts files yourself in order to defeat the build errors.

Also, the module systems should be set to AMD I believe. This will help you get closer to beating the compile time errors. Also, in visual studio, you'll need to set the standard to es5 I believe in order to get angular2 to run at the moment (but I am unsure, this was just the steps I utilized to get the alpha 26 example running).

I still try every day at work, so if I'm able to get it running (which I don't think I'll be able to do without diving into the angular2 code base and learning it, which I might do in the next couple of weeks), I will edit this response and let you know. In the meantime, keep plugging away and see if you can get it to work and let me know!

In my opinion, adoption of angular2 needs to happen ASAP for any industry leaders, since the advantages of using angular2 cannot be expressed enough. Unfortunately, since many directives that are absolutely needed in any application are still using angular 1.4, the UpgradeAdapter (ngUpgrade) needs to be usable before angular2 is useful from a business perspective.

Edit:

Actually, it seems the definition files are now located within the angular2 source now, instead of tsd. Try and grab the d.ts files from the angular2 source, and then try to compile the typescript files.

Answer 3

Setup ASP.Net 5 with angular 2.0 follow all steps as in page. It worked for me.

To compile all.ts file to .js regardless if server is running.

Open PowerShell -> redirect to root folder of project and type 'tsc'. It will compile all files.

If you want to compile all .js file when .ts file is saved/updated then type 'tsc--watch' in PowerShell and don't close it.

You must install Node.

Create following file and data must be same as from Angualr quick start

tsconfig.json
typings.json
package.json

Visual studio plugin to open project root folder in CMD or PowerShell