Prerender an Angular app

Hello 👋 ! Not so long ago, I meet the need to prerender an Angular application and I taught it will be nice to share it with you.

Let's check step by step, how to create and prerender a new Angular app.

If you are interested to prerender an existing app, You can jump to step 3. 😉

FYI: You can also clone this example on Github 👈

1. New project

Let's create a new angular project with Angular Cli

ng new angular-prerender-test

2. Create some routes

For the example I will create 3 routes :

• / : Home page (static route)
• /contact : Contact page (static route)
• /user/:id : User profile (dynamic route), content will be different for each id

You can create your components via Angular Cli with :

ng g c YourComponentName

Here is what my components looks like:

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<h1>Home Page</h1>
    <p>Hello World, welcome to the home page</p> `,
  styles: [],
})
export class HomeComponent{
  constructor() {}
}

// contact.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-contact',
  template: `<h1>Contact</h1>
    <p>You can contact me on : +1 *** *** *** *23</p>`,
  styles: [],
})
export class ContactComponent {
  constructor() {}
}

// user.component.ts
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: `<h1>User: {{ id }}</h1>
    <p>This is {{ id }}'s profile</p>`, // 👈 user id in template
  styles: [],
})
export class UserComponent {
  id = '';

  constructor(private route: ActivatedRoute) {
    // Get param from route
    this.route.params.subscribe({ next: (res) => (this.id = res.id) });
  }
}

and your app-routing.module.ts should be like :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContactComponent } from './contact/contact.component';
import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  /* Home page */
  {
    path: '',
    component: HomeComponent,
  },
  /* Contact page */
  {
    path: 'contact',
    component: ContactComponent,
  },
  /* User profile page */
  {
    path: 'user/:id',
    component: UserComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

So now when you run your project with npm start, you should have 3 pages

• http://localhost:4200 => home page
• http://localhost:4200/contact => Contact page
• http://localhost:4200/user/bob => bob's profile page

3. Install Angular Universal

Now that we have our project configured, we can move on and install Angular Universal.

ng add @nguniversal/express-engine

If you open your package.json, you should find a new script :

"prerender": "ng run angular-prerender-example:prerender"

4. Static routes

To prerender static routes, it's pretty straightforward, run :

npm run prerender

If you check the build, you should have something like :

dist/angular-prerender-example/browser
├── 3rdpartylicenses.txt
├── contact
│   └── index.html # 👈 contact page
├── favicon.ico
├── index.html # 👈 home page
├── index.original.html
├── main.271dcd2770e618160ca0.js
├── polyfills.bf99d438b005d57b2b31.js
├── runtime.359d5ee4682f20e936e9.js
└── styles.617af1cc16b34118b1d3.css

If you open those file you are going to have :

<!-- index.html -->
...
<div _ngcontent-sc36="" class="container">
  <router-outlet _ngcontent-sc36=""></router-outlet>
  <app-home>
    <h1>Home Page</h1>
    <p>Hello World, welcome to the home page</p>
  </app-home>
</div>
...

<!-- contact/index.html -->
...
<div _ngcontent-sc36="" class="container">
  <router-outlet _ngcontent-sc36=""></router-outlet>
  <app-contact>
    <h1>Contact</h1>
    <p>You can contact me on : +1 *** *** *** *23</p>
  </app-contact>
</div>
...

Tada ! Our static routes are prerendered ! 🎉

But, wait what about my dynamic route /user/:id ?!? 🤔

5. Dynamic routes

For dynamic routes, we should define which routes we want to prerender. For it, we need to create a new file user-routes at the root of the project and list all routes you want.

You can name the file as you like

Example :

/user/Joan
/user/Sherry
/user/Frank
/user/Bob

Let's open angular.json.

In prerender section add a new attribute routesFile with your file name.

...
"prerender": {
  "builder": "@nguniversal/builders:prerender",
  "options": {
    "browserTarget": "angular-prerender-example:build:production",
    "serverTarget": "angular-prerender-example:server:production",
    "routes": [
      "/"
    ],
    "routesFile" : "user-routes" // 👈 add your file name
  },
  "configurations": {
    "production": {}
  }
}
...

Then run :

npm run prerender

Let's check the output:

dist/angular-prerender-example/browser
├── 3rdpartylicenses.txt
├── contact
│   └── index.html
├── favicon.ico
├── index.html
├── index.original.html
├── main.271dcd2770e618160ca0.js
├── polyfills.bf99d438b005d57b2b31.js
├── runtime.359d5ee4682f20e936e9.js
├── styles.617af1cc16b34118b1d3.css
└── user
    ├── Bob
    │   └── index.html # 👈 
    ├── Frank
    │   └── index.html # 👈 
    ├── Joan
    │   └── index.html # 👈 
    └── Sherry
        └── index.html # 👈 

Let's open one of those files :

<!-- user/bob/index.html -->
...
<div _ngcontent-sc36="" class="container">
  <router-outlet _ngcontent-sc36=""></router-outlet>
  <app-user>
    <h1>User: Bob</h1>
    <p>This is Bob's profile</p>
  </app-user>
</div>
...

and that's it, routes listed in user-routes are prerendered ! 🎉

Hope it helped some of you.
Thanks for reading. 😇

Source code available on Github 👈

Comments

[Ionel Cristian Lupu]

99% of the time you won't have the user-routes file written manually. The routes in there should be automatically generated using some data from the database. How would you approach this?

[Majuran SIVAKUMAR]

Hello @ionellupu 👋
Yes the route file was written manually for the purpose of this article.

I agree often you will have to generate this file from an external source like Database, CMS / API etc.

For example if we take product details pages for a E-commerce, we can get the product ids we need (ex: most viewed) from an api or script that generate the routes file locally or on a cdn. Then we can fetch this file before running our prerender script.

Its a suggestion, but of course it will depends on your over all architecture and needs.

[Raúl Martín]

Hi @maj07, I understand the approach you propose. However, I see Angular Universal pre-render as a way to run my CI pipe in order to generate all the html and then distribute the static pages on a CDN. So I think it's a bit overkill to have to run a server just to run a script for fetching the routes.