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 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.

Step 2

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

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.

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.

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

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.



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.

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

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.

Just add below line in the file package.json.

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

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