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. This post shows you how.
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 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 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.
Using a Visual Studio 2015 TypeScript Project
For this first technique, we’ll cover how to set up and run the “Angular 2: Getting Started” files using a TypeScript project in 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. Open Visual Studio 2015 and create a new project: File | New | Project.
3. Select the TypeScript project template and name the project “APM” for Acme Product Management.
4. This creates several TypeScript sample files. Delete app.css, app.ts, and index.html.
5. In file explorer, open the cloned or unzipped `APM – Start` folder if you want to start with the project starter files. Open the `APM – Final` folder if you want to work with the final files from the course.
6. Copy all of the files from within the folder shown above (except the .vscode folder) to the APM project file you just created with Visual Studio.
7. Click the “Show All Files” button in the toolbar of Solution Explorer.
8. Select to include the api and app folders and the index.html, package.json, tsconfig.json, and typings.json files into the project. If desired, click “Show All Files” again to hide the remaining files.
9. Right-click on the package.json file and select: Restore Packages
10. Open the Output window (View | Output) to watch Visual Studio 2015 run npm and install Angular 2 and its dependencies.
So even through we are using a Visual Studio 2015 menu option (Restore Packages), Visual Studio is running the Node Package Manager (npm) to install all of the packages defined in the package.json file.
11. If npm finishes successfully, it should appear like this (see below) in the Output window.
12. Right-click on index.html and select Set As Start Page.
13. Press F5 to run and the application appears in the selected browser.
HOWEVER … you won’t be able to edit and continue. And if you edit and try to refresh the browser, you will most likely see a 404 message.
I have not yet figured out the magic required to provide edit and continue using Visual Studio 2015 directly … but you can get edit and continue if you stop debugging and run the application using a script instead of F5 following these additional steps:
14. Display the Package Manager Console (View | Other Windows | Package Manager Console).
15. Type `cd APM` in the Package Manager Console to change to the directory containing the APM project.
NOTE that if you used a different directory name for your project, type that instead. And if you have a space in the name, it will need to be enclosed in quotes: cd “APM – Start”
16. Type ‘npm start’ into the Package Manager Console.
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.
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 14-16 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