Setting Up Angular CLI in Visual Studio

September 20, 2017

Visual Studio is a really powerful IDE however, it also has some restrictions when it comes to setting up Angular CLI application. Visual Studio can only be used as an IDE for creating Angular CLI application, however, it will not be able to run the application as well.
This video will guide you through step by step procedure for installing and setting up Angular CLI project in Visual Studio.
We are using Visual Studio 2017 but the steps will remain the same for the older versions of Visual Studio.

Just follow these simple steps :

Step 1: Open Visual Studio and create a New Project.

Step 2: Select ASP.NET Web Application in the Visual C# template. Enter the name of the project. In this case, I am naming it as “AngularCliApp” and click Ok.

Step 3: In the next window select Empty and click on Ok.

Step 4: When the project is created, right-click the project name in the Solution Explorer window and click on “Open Folder in File Explorer”.

Step 5: This will open the project in Windows Explorer. Now open a command window here by typing “cmd” in the address bar and pressing enter key.


Step 6: In the command window, enter the command :

and press enter key. This will create a new folder with name “App” in the current directory which contains our Angular application.

Step 7: Now copy all content from “App” folder to “AngularCliApp” folder and delete the empty “App” folder. Now we will be left with content like this.
Step 8: In Solution Explorer in Visual Studio, Click on show all files and include all files in the project.


Step 9: Now we move back to the command window that we opened in step 5 and type another command:
npm install

This command will take few minutes and install the node modules that are needed to run an Angular application.
Step 10: After the completion of this command, run the command :
ng serve -o


This will run the Angular application in the browser.

You Might Also Like

0 comments