DEV Community

loading...
Cover image for Converting a regular Angular application into Angular Universal

Converting a regular Angular application into Angular Universal

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・3 min read

Here we are. We created this fantastic Angular application. It serves as a dynamic website, and it rocks!

However, by doing a quick SEO check, tears start rolling down your eyes quickly 😭.

You start doing some research, and titles, meta descriptions, OG-tags all seem out of reach.

At this point, you might even be thinking, heck, should we just start over in another framework? There's no way we can fix all of these issues now.

And then there is Angular Universal!
It's a way to render an Angular application on the server.

Your normal Angular application will render in the browser, making it a SPA, quick, but no way to do actual SEO.

With Universal, we get the best of both worlds.

Benefits of Angular Universal

  1. We can add SEO elements, like Titles and Meta descriptions
  2. We have better ways to improve the speed of our application
  3. We can show the user a skeleton first while Angular is loading
  4. We keep the real-time experience once the first load is done

Note: Google Bot is actually capable of indexing JavaScript websites like Angular. The other search engines, however, don't.

Adding Angular Universal to an Angular project

Let's start by having a basic Angular application.

In our case, we will be working with our first Angular app we created a while ago.

Download the Angular starter template from GitHub.

The basic structure looks like this:

Angular basic project structure

Then we can add Angular Universal by opening our favorite terminal and executing the following command.

ng add @nguniversal/express-engine
Enter fullscreen mode Exit fullscreen mode

This will add Angular Universal and give us the following structure.

Angular Universal structure

All the orange lines are new files

Running Angular Universal

Cool, so we usually would run Angular by executing ng serve for Angular Universal. We must execute the following command to run it locally.

npm run dev:ssr
Enter fullscreen mode Exit fullscreen mode

This might take a little bit longer than you are used to from regular Angular.
You can see in the dist folder it now created two extra folders, including a browser and a server.

Other than that we can open http://localhost:4200 and visit our Angular application.

We can still click around and refresh on different pages, so everything stays the same so far.

Building Angular Universal for production

Once you are ready for production, the following command will create a final build:

npm run build:ssr
Enter fullscreen mode Exit fullscreen mode

That will create a production build of our Angular application.

You can find today's code on GitHub.

What's next:

  • Help my browser API's stopped working in Angular Universal
  • Adding the titleService and MetaService
  • Hosting Angular Universal on a server

Keep an eye out or subscribe to my newsletter to receive daily updates on the new articles.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (5)

Collapse
devbyrayray profile image
Dev By RayRay

Awesome post Chris! I'm working with Angular since the beta but never used the SSR. Have you tried this on Netlify? If that works, it would be awesome for a lot of people!

Collapse
dailydevtips1 profile image
Chris Bongers Author

Haven't tried it on Netlify, good topic though! Will try that out and let you know
I have a topic upcoming on hosting it on a regular apache server though.

Collapse
devbyrayray profile image
Dev By RayRay

Ahhh! 😁 sounds good! Looking forwards to it πŸ‘

Collapse
timsar2 profile image
timsar2

excellent mate keep writing :D

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks! Will do, got some more Angular stuff upcoming πŸ‘

Forem Open with the Forem app