Preloaded and Angular Routed

[AaronAgility]

This is a solution to using the Angular Router to avoid client side requests.

The way it achieves this is to preload the website data by running a prefetch process in Node when building the site.

This solution is comprised of 3 main files, one of which is already present in the base branch angular-ssr

prerender-routes.ts - generates an agility-routes.txt file for Angular to prerender the page content
prerender-pages.ts - generates a JSON file of all your Agility Pages, effectively a Sync mechanism
prerender-content.ts - generates a JSON file of all the content lists you require

Component Retrofitting

In order to pull data client side components have to be updated to first check the local JSON files and then set that as the initial TransferState.

import agilityPagesData from '../data/pages.json';

 async preloadTransferStateData() {
    let pagePath = this.location.path().split('?')[0] || '/home';
    if (pagePath === '') pagePath = '/home';
    for (const key in agilityPagesData) {
      const pageKey = makeStateKey<any>(key);
      this.transferState.set(pageKey, (agilityPagesData as any)[key]);
    } 
  }

Development Caution

This has not been tested on websites with a large volume of pages or content lists. Anything pre-rendered will in-fact add to the build times of the application.

As well, since the Angular Router is held within memory, all preloaded data is also held within memory adding to the application overhead.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
agilitycms-angular-starter	❌ Failed (Inspect)			Nov 7, 2024 6:35pm