Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

May 11, 2016

Angular 2: Getting Started with Visual Studio 2015 using a Web Site

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 Visual Studio 2015 using a Web site instead of a Visual Studio project.

For this technique, we’ll cover how to set up and run the “Angular 2: Getting Started” files using the ‘Open Web Site’ feature of Visual Studio 2015.

1. Download the 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_thumb3

2. Copy the files from the ‘APM – Start’ folder to a folder that has no spaces.

NOTE: The full path to the project.json file must have no spaces for these steps to work.

3. Open Visual Studio 2015 and select: File | Open | Web Site.

4. Select the folder created in step #2.

    This opens the Angular application as a Web site and automatically installs all of the packages.

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

image-9.png (712×368)

NOTE: There is an intentionally missing component (because we have not created it yet!). When running in VS Code, the application runs even though this component is missing. In Visual Studio 2015, the compile will fail and the application won’t run. To successfully compile the code, open main.ts and comment out the contents of this file. (Just be sure to uncomment them after we build the app.component.)

6. Open the Package Manager Console (View | Other Windows | Package Manager Console)

7. Type ‘npm start’ into the Package Manager Console.

NOTE: If there are any spaces in the path, the ‘npm start’ will not execute successfully.

This will launch your default browser and watch for changes. You can then edit any of the project files (AND SAVE!). The browser will then update automatically and reflect your changes.

NOTE: If the Package Manager Console does not appear to be in the correct directory for the ‘npm start’ command to work (it must be in the directory containing the package.json file), you can change the current path used by the Package Manager Console by typing this at the PM> prompt:

set-location -path .\APM -PassThru

This changes your current path to the APM subfolder. The -PassThur option displays the current path so you can confirm it.

By following the above steps, you can follow along with the course using Visual Studio 2015 instead of VS Code. Just be sure to follow steps 6 & 7 above each time you reopen the project to restart the script that watches for changes and refreshes the browser.

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

Enjoy!

16 Comments

  1.   Don Yash — May 12, 2016 @ 3:16 pm    Reply

    I’m about half-way through the Pluralsight course ‘Angular 2 Getting Started’ using VS Code. I’m very pleased, all of the steps have worked without flaw. The file watcher is working and the browser updates immediately upon making code changes. I’m new to Angular/Angular2 and happy that this course is very thorough. Thank you for putting this course together.

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

      Thank you!

  2.   Shawn — May 13, 2016 @ 12:31 pm    Reply

    Unfortunately these steps did not work for me. Upon opening the project and the “npm install” running, a folder named apm-start is created in my visual Studio 2015 projects directory. Then, when I type “npm start” in the Package Manage Console it tries to run out of that folder and cannot find the package.json file, which is in the root project folder (c:\projects\apm-start).

    •   deborahk — May 20, 2016 @ 3:59 pm    Reply

      Try typing this at the PM> prompt: set-location -path .\APM -PassThru

      This should change your current path. The -PassThur option then displays the current path so you can confirm it.

  3.   Harri — May 14, 2016 @ 12:07 pm    Reply

    Deborah,
    Pluralsight ‘Angular 2 Getting Started’ is just perfect, thanks.

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

      Thank you!

  4.   Alex Reich — May 17, 2016 @ 3:06 pm    Reply

    Hi Deborah,

    Per your suggestion via Twitter, I’m writing to you here. From this article, we are able to run via Visual Studio. However, deploying this app & project via Publish results in a static site on IIS which one can navigate, however, dynamic routes like /product/1 fail. How can we set up the app to run like it does under “npm start” but under IIS? We’ve tried variations of httpPlatformHandler (which we have used w/pure meteor applications), but haven’t gotten the right combination.

    Thanks,
    Alex

    •   deborahk — May 17, 2016 @ 4:42 pm    Reply

      Regarding your first question, you need to set up HTML 5 style routing using one of the techniques defined here: http://stackoverflow.com/questions/35052663/routing-and-navigation-in-angular-2 (I have not tried this yet, but it sounds like others have.)

      Regarding your second question … when running a “web site” under IIS, IIS does not know how to compile the JavaScript code or set up browser-link. So there is no comparable feature under IIS that does what ‘npm start’ does (AFAIK). I would think that from IIS’s point of view, the app is just a static site?

      Hope this helps.

  5.   Harri — May 23, 2016 @ 3:39 am    Reply

    Deborah, what is your recommendation for developing tools, if you have ASP.NET Web API as backend and Angular 2 frontend? I know it depends, who is developing, but what do you prefer? I have developed Angular 1 project with Visual Studio, but Angular 2 and ASP.NET Core with all dependencies and package managers seems very tricky. Is better to code Angular 2 with VSCode and backend with Visual Studio?

    •   deborahk — May 23, 2016 @ 7:37 am    Reply

      With Angular 2 and ASP.NET Core both still in release candidate (RC) state … I plan to wait a bit yet before making a recommendation…

  6.   Rick — May 26, 2016 @ 10:50 pm    Reply

    Deborah,

    I took your course ‘Angular 2: Getting Started’ on the Pluralsight. You are one of my favorite authors. Your courses are always very clear and easy to understand. Thank you very much.

    I have a need to put Azure Active Directory authentication into the Angular 2 application. Do you plan to address this problem in your future course? Or do you have sample code on how to handle authentication in Angular 2? Thanks for your help.

    •   deborahk — May 27, 2016 @ 9:37 am    Reply

      Thank you so much for the kind words about my course!

      The Angular doc team is currently working on adding some documentation on authentication. Please check http://www.angular.io over the next few weeks for that.

  7.   Kasper — July 19, 2016 @ 6:37 pm    Reply

    I got this error 🙁

    PM> npm start
    The term ‘npm’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included,
    verify that the path is correct and try again.
    At line:1 char:4
    + npm <<<< start
    + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

  8.   Christopher Sharp — July 23, 2016 @ 12:17 pm    Reply

    Hello,

    I’ve gone most of the way through your really excellent course on “Angular 2: Getting Started”. I did a random Youtube search and found your course, which I downloaded and followed, so far with total success. However, I was unaware that this was an unofficial copy, and only much later did I see your official course which has to be subscribed to.

    Anyway, I got well into the module “Navigating and Routing”, then at 03:33:51 into the video, it jumped ahead to the next module “Angular 2 Setup Revisited”. It looks as if I havn’t missed much, but I would be most grateful indeed to know where I can find the last few minutes of that module. Incidentally, the unofficial video has since been taken off Youtube.

    If you go to my website you will see that I’ve had some interesting experiences with various frameworks, including integrating Angular 1.x with SVG.

    Christopher Sharp

Trackbacks/Pingbacks

  1. Angular 2: Getting Started With Visual Studio 2015 -Deborah's Developer MindScape

RSS feed for comments on this post. TrackBack URI

Leave a comment

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