Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

April 28, 2016

Angular 2: Getting Started With Visual Studio 2015

My “Angular 2: Getting Started” course on Pluralsight details how to get started with Angular 2. To provide guidance that works on any platform (Windows, OS X, and Linux), the course uses Visual Studio Code as the editor. However, there are many developers that prefer to use Angular 2 with Visual Studio 2015.

The biggest challenge in providing guidance for using Angular 2 with Visual Studio 2015 is that there are too many options.

  • Do we use TypeScript? If so, do we use a TypeScript project in Visual Studio 2015?
  • Do we use a simple “Web Site”?
  • Do we use ASP.NET? If so, ASP.NET version 4.6 (current version) or ASP.NET Core 1.0 (previously known as ASP.NET version 5.0 and currently in beta)
  • Do we use MVC? If so, MVC 5 (current version) or MVC 6 (currently in beta)?
  • Do we use more JavaScript-ish tools such as npm? Or try to do everything with Visual Studio tools?
  • Do we use the command line? Or try to do everything within the Visual Studio 2015 IDE?
  • And so on …

The plan is to cover several of these options, starting with the most basic steps required to use Visual Studio 2015 with Angular 2.

Here are the links to the options covered so far:

Enjoy!

12 Comments

  1.   Nick Vergauwen — May 8, 2016 @ 4:39 pm    Reply

    Hey Deborah,

    I followed your amazing course on pluralsight and like you said, wanted to try it out myself in vs2015.
    But i cannot seem to get it to work.
    If i do everything the exact same way you ask me to i get the following exception:
    “Cannot resolve referenced file: $PathToProject$\tsconfig.json’.” Where $PathToProject$ is the actual path towards the project.

    After a while i got the idea to maybe delete that file and just do it in the properties in the project but when i set the typescript build to system i get the exception: “module code generation ‘system’ not supported.”

    Any idea’s on what i’m doing wrong? i really want to start working with angular 2 but i already waisted hours just getting it to work.
    Would be nice if i could make an app with angular2.

    Thanks in advance for your advice!

    •   deborahk — May 11, 2016 @ 5:05 pm    Reply

      I have significantly updated the information provided on Angular 2 with VS 2015 in this post via links to more detailed steps.Check it out and see if any of the new info helps you get going.

  2.   Nick Vergauwen — May 14, 2016 @ 3:20 pm    Reply

    Thank you for the update Deborah!

    It proved to be quite the aid 🙂
    Alas i still ran into some issues which i’ll share on here 🙂 to help the people that had the same problems as me:

    First things first:
    If you get a 404 error saying it cannot find an angular package you need to install a more recent version of npm.
    installing the latest version of nodejs was not enough for me for some reason…
    I had to manually update npm by performing the following command:
    “npm install -g npm”
    After that it still didn’t work for me so i cleared the cache by performing the following command:
    “npm cache clean”
    After that still no luck so i restarted visual studio and it worked! 🙂
    Yay! it finally installed all the packages!

    You’d think that’s it right? well think again 🙁

    I got the following build error:
    “Cannot resolve referenced file: $PathToProject$\tsconfig.json’.” Where $PathToProject$ is the actual path towards the project.
    To fix this error i found this post, the answer a certain “Kevin” gave on this stackoverflow post was the solution to the problem:
    http://stackoverflow.com/questions/30142996/how-to-edit-the-typescript-1-4-specified-task-executable-location
    (If you also had the same issue please like the man’s post, it only takes a minute!)

    Basically what Kevin said was go to the following places and rename (or if you have balls of steel you can delete) the “typescript” folder:
    C:\Program Files (x86)\Microsoft SDKs
    C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\
    C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v12.0\
    C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\

    after that run a repair on your visual studio 2015 installation.

    After that everything works for me!

    Thanks again! 🙂

    •   deborahk — May 16, 2016 @ 4:12 pm    Reply

      Thank you for posting all of this information. I’m sure it will help others as well!

  3.   july.tech — July 21, 2016 @ 8:16 am    Reply

    Firstly, thank you for the pluralsight tutorial and for the follow-up you posted here. If you have a minute, could you share your thoughts on the pros and cons of the options for doing Angular 2 development in Visual Studio that you outlined here? Something similar to a decision guide? How do I choose the right kind of VS project to work with? Does the choice of the ASP.Net framework (4.6 vs 1.0 Core) have any bearing on the Angular 2 coding aspect of the project? Are Visual Studio tools on par with the “JavaScript-ish” tools (gulp? grunt?) and stuff available through command line in terms of functionality?

    Thanks in advance!

    •   deborahk — July 25, 2016 @ 12:35 pm    Reply

      Wow! Lots of good questions! I am not in a position to comment on this right now. ASP.NET Core just came out a few weeks ago. Angular 2 is not yet released and still changing significantly. I think you’ll find more discussion of these topics over the next weeks/months as these products are released/updated/compared.

  4.   Joe T — September 6, 2016 @ 8:37 am    Reply

    I build mostly internal based applications that require the use of active directory and storing user rights in a session object. Does this mean I am limited to just the VS 2015 ASP.Net project?

    Thanks

  5.   Daniele — January 14, 2017 @ 8:03 am    Reply

    Hi Deborah
    I followed your fantastic course on pluralsight about Angular2, good work.
    I’ve only a question about the http call using the Observable.
    In many case we have to implement a polling mechanism to be sure that our data
    are always up to date.
    How is possible in Angular2 do somenthing like this?
    Thank you very much.

  6.   Hector Polanco — January 23, 2017 @ 6:48 am    Reply

    I am trying to follow your course on pluralsight about Angular2; the problem that i am experiencing is that the browser, IE 11, does not refresh. Any ideas.

    Thanks

    •   deborahk — January 27, 2017 @ 4:48 pm    Reply

      If you are using Visual Studio instead of VS Code … then I don’t think I was ever able to get Visual Studio to refresh either. You could try posting to StackOverflow and see if any of the experts there know of a solution.

Trackbacks/Pingbacks

  1. Dew Drop – April 29, 2016 (#2241) | Morning Dew
  2. Angular 2: Getting Started with a Visual Studio 2015 ASP.NET 4.x Project -Deborah's Developer MindScape
  3. Angular 2: Getting Started with a Visual Studio 2015 TypeScript Project -Deborah's Developer MindScape
  4. Angular 2: Getting Started with Visual Studio 2015 using a Web Site -Deborah's Developer MindScape

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2017 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs