In this tutorial, I will show you how to setup Angular 2 with ASP NET MVC 5 Application using Visual Studio 2015. To be very honest, this is totally different from Angularjs setup in ASP.NET MVC 5. But don’t worry, I will show you the setup procedure in step by step as easy as possible.
First of all, I will install TypeScript, then install Node.js, and then configure visual studio to use npm, and then create a new project, and then add all the required files for Angular2, and then add all the required references in Layout.cshtml page, and then add the some code for View page.
Set up Angular 2 with ASP NET MVC 5 Application
Now I will explain how to setup Angular 2 in ASP NET MVC 5 Application in step by step. So, follow the below steps.
Step # 1 – Install Typescript
In this first step, we will install Typescript for Visual Studio. Just go to this link (http://www.typescriptlang.org/#download-links) and download typescript for visual studio and then install it. In this project, I am using Visual Studio 2015 and that’s why I will download Typescript for Visual Studio 2015. But if you are using visual studio 2017 then you should have to download typescript for visual studio 2017. You can get Typescript as you required in your project.
Note: – Make sure you don’t get any error.
Step # 2 – Install Node.js
In this second step, we will install Node.js. Just go to this link (https://nodejs.org/en/download/) and download required Node.js and then install it. It will also install npm for you.
Step # 3 – npm Configuration
Now in this step, we will configure visual studio to use npm. Just go to Tools => Options. It will show a new “Options” popup.
Then choose “External Web Tools” under Projects and Solutions from the left pane and then you will see four checkboxes in a list and the “Path” variable is at the third position. Just select the “Path” variable and bring it to the second position by just clicking on up arrow button. And then just click “OK” button. Once you do it, just restart your Visual Studio.
Step # 4 – Create a new ASP.NET MVC 5 Project
Now in this step, we will create a new ASP.NET MVC 5 project. Go to File => New => Project and it will show a “New Project” popup.
Then select The “Web” under Visual C# tab from left pane => and then select “ASP.NET Web Application” from the middle pane => and then enter the name of the application in the name field => and then click “Ok” button. This will show a new “ASP.NET Project” popup.
Then choose MVC option => then check the checkbox under the “Add folder and core references for:” => and then just click ok button. It will create a new ASP.NET MVC 5 project.
Step # 5 – Add the Angular2 required files
Now in this step, we will add all the required files in our project.
Add New Folder:
First of all, add a new folder named “app” in your project. To do it, just right click on Project name from the right pane under the solution explorer => Add => New folder => and then name it “app”.
Now, add a new Typescript file under the “app” folder which you have created with the name “app.components.ts”. Go to solution explorer => right click on app folder => choose Add => then choose the TypeScript File => and then enter the name (app.component.ts) => then click ok button and it will create a new file. Now just copy the below code the paste it to app.component.ts file.
Now, add another TypeScript file under the “app” folder with the name “app.module.ts”. Then copy the below code and paste it to app.module.ts file.
Now, add another TypeScript file under the “app” folder with the name “main.ts”. And then copy the below code and paste it to main.ts file.
Add Systemjs.Config.js file: