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/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!