Prerender Angular application — be SEO

Prerender your application with @ng-toolkit/universal, and make it readable for search engine robots.

Maciej Treder
The Startup
Published in
4 min readApr 7, 2019

--

In one of my previous post I was writing about how to make your Angular application SEO friendly by using Server-Side Rendering — Angular Universal. This solution involves NodeJS to launch Angular framework on the server side and ship to the end-user fully rendered html, based on user request; but… What if you don’t have compute resources to render view on the server side? What if you just don’t want to use it? Today I am going to show another use case for Angular Universal — prerendering application at the build time.

Create basic application and check if it is SEO-friendly

Let’s create an angular app and check, how robots see it:

ng new myApp --style css --routing true
cd myApp
ng serve

Now in the other terminal window execute curl command and take a look at the output:

$ curl localhost:4200<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

Do you see the problem? What we got inside <body>? Nothing. App bootstrap node; and some JavaScript. How to make this output reacher?

ng add @ng-toolkit/universal

Let’s make a use from one of the @ng-toolkit functionalities — Universal

ng add @ng-toolkit/universal

Above command should launch a schematics, which apart of installing dependencies necessary for Angular Universal, add to your package.json couple useful scripts. Let’s use one of them:

npm run build:prerender

--

--

Maciej Treder
The Startup

Senior Software engineer at Akamai Tech; Twilio Champion; Author of ng-toolkit project Enthusiast of Angular