Setting Up Angular 2 Development Environment In ASP.NET MVC And Web API

If you want to setup Angular 2 development environment without using Angular CLI and command line then this is the right place for you.

In this article, we will learn how to set up an Angular 2 development environment in Visual Studio 2017 without using Angular CLI.

Prerequisites
  • Node.JS should be installed (If it is not installed go to link download and install).
  • NPM should be installed (Run command line to install NPM: npm install -g npm@latest).
  • Visual Studio 2017 should be installed.
Step 1

Create an ASP.NET MVC or Web API project.

Angular 

Step 2

Run the below command in the Package Manager console:

PM> Install-Package Angular2-Template-for-MVC-and-WebAPI -Version 1.0.0

[Follow the console instruction and give Y or N flag as per your requirement].

Angular

Angular

Angular 

Step 3

Go to the project and search for "package.json". Right click on it, search for "Restore Packages", and click on it.

Angular

Angular 

It will take several minutes; Keep patience and wait until the packages get installed successfully. It might be possible your project is not getting compiled and you are getting several compile errors as in the below screen. If it happens, restart Visual Studio 2017 and again build the solution. I am sure this time it should be compiled successfully. 

Angular

Angular

Step 4

Run the project and you can see the Angular 2 output. 

Angular 
Step 5 - Done

Congratulations! You have successfully created an Angular 2 development environment in Visual Studio 2017. If you have any query or concern, just let me know or just put in the comment box and I will respond as soon as possible. I am open to discussing anything even silly questions as well. If you have any suggestions related to this article, please let me know and I promise I will improve this article to a maximum level.

Summary

In this article, we have learned how to create an Angular 2 development environment in Visual Studio 2017 in C#.