How to use Angular2,4,5 with ASP.NET MVC 5 vs2015 part one

Question

This post is about how to use Angular 4 with ASP.NET MVC5. In one of my existing projects we were using Angular 1.x, due to some plugin compatibility issues, we had to migrate to latest version of Angular. We couldn’t find any good article which talks about development and deployment aspects of Angular 4 with ASP.NET MVC.

The pre-requisites are

• npm (Node Package Manager) - I am using npm version 5.5.1
• Angular CLI - I am using angular cli version 1.5.3
• Visual Studio 2017 / 2015 - For developing ASP.NET MVC project.

First you need to create ASP.NET MVC project.

and next step right click project 


and next step click open folder in file explorer 

type cmd and enter 

Once you created the project, using Angular CLI you need to create Angular project. You need to do it in the root folder. And you need to execute following commands to create an Angular project. 

 

ng new Hellow Angula



and then press enter to install project 


successfull created project and next step opne visaul studion 2015 

next stop open visaul studio 


and next step open heloAngular app


Unlike earlier versions of Angular, you need to reference the generated files with Angular CLI. 
You can generate the build files using ng build command. 
Before executing the ng build command, you need to configure your output folder, the scripts will be generated to the configured folder, 
by default it will be dist. I am configuring it to ../Bundles folder. open .angular-cli.json file and change "outdir":".../Bundles",

Next you need to run ng build command. Once you run the command, it will generate required files to the bundles folder.