In this article, I will try to show you how to integrate Angular Universal to ASP.NET Boilerplate’s ASP.NET Core & Angular template (https://github.com/aspnetboilerplate/module-zero-core-template). Then, we will build a basic application called Hero Shop. This application will display list of heroes and give you a starting point for your ASP.NET Core and Angular Universal application.
First Words
I think Single Page Application Frameworks are really good for developing backend applications nowadays. SPAs provide better developer and user experience.
We are also using Angular in both ABP Framework’s free templates and AspNet Zero.
SPA frameworks are not considered as a good solution for public websites because of some well known reasons like long initial app load time and SEO optimizations. Angular provides universal rendering in order to overcome these technical hassles. A more detailed information can be found here https://universal.angular.io/.
Create the Project
Let’s start by downloading a new template on https://aspnetboilerplate.com/Templates. Name your project as Acme.HeroShop.
When you press “Create my project” button, you will get a zip file including the Visual Studio solution.
You can run your application according to this document https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Angular.
Add the Public Project
Add a new project called “Acme.HeroShop.Web.Public” to your “Acme.HeroShop.sln” solution. Select Empty project in the next step. We will configure everyting from scratch 😉.
Create angular-cli app
It’s
