Creating Angular 5 App With Visual Studio 2017 - An Easy Way

There are multiple ways to create an Angular app with Visual Studio and this article explains one of the easiest and simplest ways to create Angular 5 App with Visual Studio 2017 using a template.

There are multiple ways to create an Angular app with Visual Studio and this article explains one of the easiest and the simplest ways to create Angular 5 app with Visual Studio 2017 using a template.

Let’s start creating an Angular 5 app with Visual Studio 2017 step by step.

Step 1

Download and install the latest version of TypeScript. Following are some screenshots of the same.

Angular 5 App

Angular 5 App

Step 2

Download and install the latest version of Node.js (9.2.0 Current) as shown in the below screenshot.

Angular 5 App

Step 3

Open Visual Studio 2017 and create a project. Now, open Visual Studio 2017 and go to File >> New >> Project…

It will open a "New Project" window. Search for “Angular5TemplateCore” from the online template, as shown in the following screenshot.

Angular 5 App

Click on OK.

It will install the selected template if it is not installed already. You need to close the application (Visual Studio 2017) in order to complete the installation of “Angular5TemplateCore”. Once the installation is completed, re-open the Visual Studio 2017 and select File >> New >> Project… and search “Angular5TemplateCore” again. This time, it will be displayed with a green tick mark indicating that it has been installed. Select it and click on OK button to continue.

Angular 5 App

It will create a new application. Following is the folder structure of the newly created application.

Angular 5 App

Step 4 - Re-build the application.

Re-build the application and wait until build completed. It may take several minutes. You can check build progress in the output window.

Angular 5 App

As you can see in the preceding screenshot it saying that “build delayed until Bower/npm ……….”. Select Bower/npm from the dropdown list of the output window.

Angular 5 App

Once “Bower/npm” install completed you will find that build get succeeded.

Angular 5 App

Once build is completed run the application. You may get some exception as shown in the below screenshot but you do not need to worry about it. It will get resolved by making a single change.

Angular 5 App

Just add below line in the file package.json.

"postinstall": "webpack --config webpack.config.vendor.js"

Angular 5 App

Re-build and run the application. Following is a screenshot of the running application.

Angular 5 App