Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

May 11, 2016

Angular 2: Getting Started with a Visual Studio 2015 ASP.NET 4.x Project

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 as outlined in this prior post. This post focuses on using Angular 2 with a Visual Studio 2015 ASP.NET 4.x project.

NOTE: If you don’t want to follow all of these steps, you can download the “Angular 2: Getting Started” starter files for an ASP.NET 4.x project in Visual Studio 2015 here: https://github.com/DeborahK/Angular2-GettingStarted and use the “APM – Start VS 2015 ASP 4x” folder. The only step required below is then Step #2, downloading and installing the latest TypeScript tools for Visual Studio 2015. When you first open the provided solution, the packages will install/update automatically.

To manually set up and run the “Angular 2: Getting Started” files using a ASP.NET 4.x project in Visual Studio 2015, follow these steps:

1. Download the Angular 2 starter files from my GitHub repo: https://github.com/DeborahK/Angular2-GettingStarted

    If you are not familiar with using GitHub, just click on the “Download ZIP” button as shown below. Then unzip the files.

image

2. Open Visual Studio 2015 and download the latest set of TypeScript tools for Visual Studio. Open Tools | Extensions and Updates and search for TypeScript. Select the latest TypeScript version (1.8.4 shown below). Then install the downloaded package.

image

3. Create a new project: File | New | Project, select the ASP.NET project template and name the project “APM” for Acme Product Management.

image

4. Select the desired ASP.NET 4.x template. I selected the empty template with no MVC, no authentication and no hosting.

image

5. Copy the files from the APM – Start folder that was downloaded from my GitHub repo (see Step #1) to the APM folder containing the APM.csproj folder.

image

6. Select the Show All Files button in Solution Explorer to show all of the files.

image

7. Right-click on each folder/file to be included in the project (as shown below) and select ‘Included in Project’.

NOTE: You may see a dialog that asks if you want to search for TypeScript Typings. Select ‘No’.

image

8. Right-click on packages.json and select ‘Restore Packages’. This uses npm to install all of the packages defined in the package.json file. (Similar to typing ‘npm install’ at a command line prompt.)

image

9. Open the Output window (View | Output) to watch the npm command execute. When it is finished, you should see something like this:

image

NOTE: If you are using Angular 2 RC or higher and see errors here, such as: “‘angular/compiler’ is not in the npm registry”, your Visual Studio 2015 is most likely using an older version of npm. To correct this. Use Tools | Options | Projects and Solutions | External Web Tools and move the $(PATH) entry above the $(DevEnvDir) entries as shown below.

image

10. Refreshing Solution Explorer, you should then see a node_modules and typings folders as hidden folders for the project.

image

11. There is one additional option in the tsconfig.json file that is not required when using VS Code or some of the other editors, but is required if using Visual Studio 2015. Add this line to the tsconfig.json file: “compileOnSave” = true and SAVE.

image

You may have better results at this point if you exit Visual Studio 2015 and reopen it.

12. Click the Run button or press F5 to run the application.

This will launch your default browser and run the application. You can then edit any of the project files (AND SAVE!). Then refresh the browser to see your changes. NOTE: The refresh only works when there is no routing path in the address bar.

13. If you see errors on compilation such as “Property ‘map’ does not exist on type ‘Observable<Response>’” or “Observable cannot be found”, then exit Visual Studio and follow the instructions here: https://github.com/Microsoft/TypeScript/issues/8518

This involves replacing your C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js file. NOTE: This requires admin privileges.

By following the above steps, you can follow along with the course using Visual Studio 2015 instead of VS Code.

It would be great to hear from you on whether these steps worked for you. Follow me on twitter: @deborahkurata

Enjoy!

51 Comments

  1.   Lazaro — July 10, 2016 @ 9:40 am    Reply

    Thank you again Deborah for all your work.

    I’ve got a question. Is this sample an approach to Single page Application?

    •   deborahk — July 11, 2016 @ 2:11 pm    Reply

      I’m not sure I understand the question? Angular apps are, by their nature, single page applications.

      •   Lazaro — July 11, 2016 @ 3:35 pm    Reply

        I am trying to use Angular2 with ASP.NET 4.x MVC 5 in a NO SPA approach.

        I won’t have the component templates inline, so I am planning to use templateurl instead of template to define the template html.
        I want to get the html as a result of a request to a mvc controller action.

        Do you have any sample of that? I mean Angular2 getting the html from a razor view (ASP.NET MVC 5).

        I am concerned in how will the mvc routing match in that approach?

        •   deborahk — July 12, 2016 @ 2:34 pm    Reply

          If ASP.NET provides each template, then you aren’t getting any benefits to the Single-Page-Application feature of Angular. What does Angular provide for you in that scenario?

          •   Lazaro — July 15, 2016 @ 11:58 am    

            In that scenario angular gets the views html from a url in my website (mvc controller and action) not from a html file.
            I will have a mvc controller to provide the view html because I want to use the power of razor to render pages, using different languages resources files.

        •   deborahk — July 18, 2016 @ 2:35 pm    Reply

          If I understand what you are saying correctly … there is no need for/use of Angular in your scenario. Just use MVC.

          •   Lazaro — July 22, 2016 @ 6:46 am    

            Thank you for your response.

            Yes, I need to use Angular because Angular data binding is awesome.

            I am doing an approach similar to Matt Honeycutt’s “Building Strongly-typed AngularJS Apps with ASP.NET MVC 5” course in Pluralsight.

            I’ve got from your course, from Angular.IO and from Matt’s.

  2.   Douglas Stanley — July 14, 2016 @ 6:41 pm    Reply

    Deborah – loved your course and this starter. I’m trying to do a SPA with Angular2 and Web.API. Things were going well, but I’ve been having trouble with the RC4 release of Angular (I used Beta 15 as from your demo). Specifically there seems to be an issue with the @module convention used in RC4, and I also read that the typings didn’t come along for the ride.

    Any chance you could post yet another sample with RC4? or just point me in the right direction.

    V/R

    Doug Stanley

    •   deborahk — July 18, 2016 @ 2:34 pm    Reply

      RC 5 was going to come out last week … so I was waiting for it before updating this example. Now it has been delayed and is expected out some time this week. As part of RC 5 … there are significant bootstrap changes involving setting up AppModule … so I was waiting for it.

  3.   Nabeel Herzalla — July 19, 2016 @ 10:59 am    Reply

    Hello Doberah,
    I watched your Angular 2 class at Pluralsight and trying to run the Visual Studio version getting the following error :

    Error during instantiation of Token Promise!.(Compile this is run time error).

    no matter how I try it, Empty VS solution or MVC it always gives errors (MVC compile time error(build error : Map not defined).

    Thanks,
    Nabeel.

  4.   Raed A — July 22, 2016 @ 3:41 am    Reply

    Hi,
    How do you publish this app to azure?
    Thanks

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

      I have not tried that but can you use the “publish” option?

  5.   Kamran Pervaiz — August 2, 2016 @ 6:16 am    Reply

    HI Deborah,

    thanks for this article, I learned Ng2 by using your course on PluralSight.com. Its great but now I think you need to do Angular 2 for RC4 with testing as well. finding stuff on testing like mocking/router/http/etc etc is rare. I hope you guys are considering this at pluralsight.com.

  6.   Musa — August 3, 2016 @ 12:23 am    Reply

    I am getting below error while build the app from Visual Studio 2015,

    Error TS2307 Cannot find module ‘angular2/core’.
    Error TS2307 Cannot find module ‘angular2/platform/browser’.

    •   deborahk — August 4, 2016 @ 4:48 pm    Reply

      What version of Angular 2 are you targeting? Were there any errors when you ran the instructions defined in step 8?

  7.   Regina — October 25, 2016 @ 3:01 am    Reply

    Hi Deborah,

    Thank you for the article.
    I’m installing Angular2 on Visual Studio 2013, I see that the Restore option on step 8 is not possible with VS2013 – i.e.
    8. Right-click on packages.json and select ‘Restore Packages’. This uses npm to install all of the packages defined in the package.json file. (Similar to typing ‘npm install’ at a command line prompt.)

    Is there an alternative way to do this with Visual Studio 2013?

    Thanks,
    Regina

  8.   nehmia — November 2, 2016 @ 7:48 am    Reply

    I’ve done everything and it seemed fine but including the ‘node_module’ folder takes forever and VS crashes after few minutes of not responding. Do you have any suggestions? I might try to use CDN for the polyfills otherwise

  9.   Hank — November 8, 2016 @ 11:57 am    Reply

    The instructions don’t mention copying the file systemjs.config.js The APM application didn’t work for me until I copied it to the visual studio APM solution.

Trackbacks/Pingbacks

  1. Publish Angular 2 App from Visual Studio to Azure – Insights on a Complex World

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