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/cli@latest

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!

  • What is Cloud Computing?
  • FIX: Azure Static Web Apps Doesn’t Serve Brotli Compressed Files
  • What is LogLevel in appsettings.json (ASP.NET Core)
  • Deploying Blazor WASM on Azure Static Web Apps (integrity error)
  • Allow Remote Connections to PostgreSQL in Azure VM
  • How to Change Your PostgreSQL Password in Ubuntu
  • 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
  • What is a VPN and why I use it?

Categorized in:

angular, asp.net core,

Last Update: March 2, 2019