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.
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:
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