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).
- .NET Core SDK for 2.2.0-preview2 — includes ASP.NET 2.2.0-preview3
- Install Visual Studio 2017 15.9 Preview 3
- Node.js and npm latest version
- Angular CLI
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.
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.
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
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.