Skip to main content

How to create an Angular 7 app with Visual Studio 2017

Last week, I posted a guide on upgrading Angular 6 app to Angular 7. But, what if you wish to create Angular 7 app from scratch with VS 2017? At the time of writing this post, default ASP.NET Core SPA templates allow you to create Angular 5/6 based app with Visual Studio without installing any third-party extensions or templates. This post talks about how to create an Angular 7 App with Visual Studio 2017.

How to create an Angular 7 app with Visual Studio 2017

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here. The book is updated to Angular 7.

In this post, we’ll use an ASP.NET Core 2.2 based Angular template project, which out of the box creates an Angular 6 app. You can also use ASP.NET Core 2.1 based Angular template, which creates an Angular 5 app. Therefore, before we begin, please do the following installation (ignore if already done).

First, update the Angular CLI to the latest version. Run the following command to update Angular CLI.

npm install -g @angular/cli

Once it is installed, check the version of Angular CLI. It should be greater than 7.

Update Angular CLI to latest version

Now, open the Visual Studio 2017, hit Ctrl+Shift+N and select the ASP.NET Core Web Application (.NET Core) project type from the templates. When you click Ok, you will get the following prompt. Select ASP.NET Core 2.2 and choose the Angular template.

How to create an Angular 7 app with Visual Studio 2017

The Visual Studio will create an ASP.NET Core 2.2 and Angular 6 application. Just run the app to make sure it is running successfully. You can verify the Angular version via the package.json file.

How to create an Angular 7 app with Visual Studio 2017

To create Angular 7 app, first delete the ClientApp folder. Once the folder is deleted, open the Command prompt and navigate to the project folder and run the following command.

ng new ClientApp

Once you hit this command, Angular CLI prompts to add routing or style sheet format. This is a new feature in Angular CLI. The Angular 7 application will be ready after sometime. You can verify the angular version via the package.json file. Well, the Angular 7 app is ready. Now build and run the app to see the app in action.

If you really want to master Angular 7, ng-book is the single-best resource out there. Get your copy here.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then Buy Me A Coffee

One thought on “How to create an Angular 7 app with Visual Studio 2017

  1. Hi Sir hopefully you will be fine.
    As I am reading your articles its very well explained the flow.
    Can you write an article on publishing .netcore with with angular created template project on IIS, and on Linux Sever.
    Thanks in advance Sir.

Leave a Reply

Your email address will not be published. Required fields are marked *