Configure Angular Quick Start Source In Visual Studio 2017

Introduction

This article explains how to quick start Angular 2 using Visual Studio 2017. We can download all supporting files from the website and can quickly start to implement the application. This article explains steps of implementing Angular QuickStart.

Angular 2 Quick Starts

We need to download supporting files from GitHub for Angular 2 QuickStart. Go to the https://github.com/angular/quickstart link to download the same.

Click "Clone or download" to download Aular 2 QuickStart source.

Click Download ZIP on the next window to get the Angular 2 QuickStart source file as a ZIP.

 Go to the downloaded location in our local system, extract the ZIP file. We can see the extracted Angular 2 QuickStart source in the below screenshot.

Install NodeJS

We need to install Node.js if not installed. The below article link explains how to install Node in a step by step way.

• Simple Way Of Node.js Installation In a Step By Step Process

Install Visual Studio 2017

 We need to install Visual Studio 2017 if not installed. The below article link explains how to install Visual Studio 2017 in a step by step way.

• Learning New Features And Installation Way Of Visual Studio 2017

 

Verify Node JS and NPM

We need to check whether Node Js and NPM are installed or not. If installed successfully we can check the version using the below commands.

For Node Js “node -v”

For NPM “npm -v”

We will be getting an error if both are not installed while executing the above command.

 

Check TypeScript

Visual Studio 2017 Typescript  is installed by default. Go to “Help” menu and go to “About Microsoft Visual Studio”. We can see all the installed products. If Typescript is installed we can see the Typescript with the version under installed products at the end.

 

If Typescript is not installed we need to install Typescript for Visual Studio 2017. Go to the below link, download and install.

https://www.microsoft.com/en-ca/download/details.aspx?id=55258

 

First Angular 2 Quick Starts

Open the Visual Studio 2017. Go to File - New - Project.

 

After opening the new project window, go to Visual C# - Web - ASP.NET Web Application (.NET Framework) - Type Project name in Name column - click OK.

Now “New ASP.NET Web Application – Angular_2_Quick_Start” window will be open. Select Empty and click OK.

 

Now Empty ASP.NET Web Application will be opened after clicking ok. We can see the empty web application folder structure.

Already, we downloaded Angular 2 QuickStart source as a ZIP file and extracted it. Go to that folder, select and copy the below-mentioned files.

• src
• bs-config.json
• json
• json

Go to the empty ASP.Net Web application.  Select Project - Right Click - Open Folder in File Explorer.

Paste in now opened location from the files copied from Angular 2 QuickStart sources. We can see the pasted files look like the below screenshot.

After pasting copied files, click “Show All Files” in Solution Explorer.

After clicking “Show All Files” all pasted files will be shown in Explorer.

 

I am only showing the pasted files in Solution Explorer. Now we need to include those files. First select four files, right click and go to “Include In Project” then click. Now those files will be included in our project.

 After including our file we can see the below screenshot.

 

Restore Packages

Package.json file contains the packages as well as the versions we are using in our Angular quick start. Currently, we do not have “node_modules” folder in our solution. Node module folder contains all packages so we need to restore Package.json to download all packages.

Go to “Package.json” in solution explorer and right click then click “Restore Packages”.

 

After clicking Package Restore, start to install all packages. We can see the package installation process looks like the below screenshot.

 After installing packages, we can see the “Package Installing Packages Complete”.  After completion, one popup window will be open. Click “Yes To All”.

 

Go to solution explorer click “Show All Files” previously mentioned. Now we can see the node_module folder in our solution explorer, do not include node_module folder in our project.

 

Now save our project and open command prompt. Go to our project path in command prompt.

 

After reaching our project path in command prompt, type “npm start” command to run our Angular 2 quick start application.

 After executing our application using “npm start” command it will run and look like the above screenshots then launch the browser and execute the output which will look like below.

 

We can run this application using “npm start” command but cannot use “F5” or Run icon in Visual Studio 2017. The next article explains how to execute our project using “F5” or run icon.

Conclusion

This article explained how to configure Angular 2 QuickStart source with Visual Studio 2017 in a step by step way. I hope this helps new learners.