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.
- 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! 🙂
- 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
- Adding Constructor Parameters in DI
- Personal Project with Vanilla JS & CSS Grid (Recipe App)
- Another Year, Another Green Card Failure