Create ASP.NET Core App with Angular 7 via VS 2017 Template

I’ve seen a lot of questions in Stackoverflow, and all over the www, related to how to use the newest version of Angular (version 7) with the template that VS 2017 ships with.

As you probably know, currently, the built-in Visual Studio 2017 .NET Core + Angular template ships with Angular 6.

Let’s now see how to create a sample ASP.NET Core 2 & Angular (6) project.

  1. In Visual Studio go to File / New / Project

2. Select Web / ASP.NET Core Web Application

3. Select Angular from the project templates list and click OK to create the new project

4. This is how your project structure would look like now:

The ClientApp folder is where the newly created Angular 6 app is located.

To see what version of Angular you are currently using, open the package.json file located inside the ClientApp folder.

As seen above, we are currently using Angular 6. Let’s change that.

5. Remove the ClientApp folder completely

6. Update Angular CLI globally (from 6 to 7)

npm uninstall -g angular-cli
npm cache clean or npm cache verify (if npm > 5)
npm install -g @angular/[email protected]

Now, let’s see what is the current version of Angular CLI in our system. Doing that is pretty easy.

6.1 Check Angular CLI version

Inside your command prompt type: ng version

Great news. Our Angular CLI version is now 7.3.4.

7. Create a new Angular project inside our project folder

8. Check package.json

Now that we’ve installed Angular to our project let’s check the versioning again.

Great! We are now using the newest Angular CLI, as well as all the parts that come with it which are, too, updated to their newest version.

9. Test the app with dotnet watch run (or dotnet run)

Nice! It seems that everything works. Let’s open up the browser.

10. Browse the website (https://localhost:5001)

Cool… well… not fancy, but hey, this is the default layout that Angular 7 ships with!

Angular 7 is now up and running, fully integrated with our ASP.NET Core. Now, do something awesome with all this! 🙂

You could start with the official Angular 7 documentation. For ASP.NET Core you could use the official Microsoft documentation, which is pretty awesome!

Happy coding!

  • Reducing the usage of if-else and switch-case nightmare (Strategy Pattern)
  • Adding OData to ASP.NET Core WebAPI
  • Why and when to use the SQL ‘N’ prefix in SQL Server (and in general)?
  • LINQ in C# – immediate, deferred, streaming, non-streaming
  • Using NLog and ASP.NET Core 3.1 to log to the database
  • Creating Console.ReadLine Snippet in Visual Studio 2019
  • Enable HTTPS for local development in ASP.NET Core
  • How to add underscore to your private fields in Visual Studio
  • I’ve started using a VPN. What is a VPN?
  • What is a VPN and why I use it?
  • ASP.NET Core 3 & Blazor – Part 1
  • How to Overcome Loss
  • Вечерна доза размисли
  • Have Goals not (just) Dreams!
  • Windows Terminal Preview is Finally on Microsoft Store

1 thought on “Create ASP.NET Core App with Angular 7 via VS 2017 Template”

  1. Just wish to say your article is as surprising. The clearness for your put up is simply great and that i could assume you are an expert in this subject. Well along with your permission allow me to grasp your feed to stay up to date with impending post. Thank you 1,000,000 and please continue the rewarding work.

Leave a Reply

Your email address will not be published.