Preloaded and Angular Routed

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

.gitignore

@@ -6,14 +6,23 @@
 /out-tsc
 /.angular
 /bazel-out
-prerender-routes.js
+
+# environment files
 /src/environments/environment.prod.ts
 /src/environments/environment.ts
 /src/environments
 content.json
 pages.json
 agility-routes.txt
 
+#agility prerendering
+prerender-routes.js
+prerender-pages.js
+prerender-content.js
+agility-routes.txt
+pages.json
+content.json
+
 # dependencies
 /node_modules
 

dotenv.config.js

@@ -4,7 +4,7 @@ const path = require('path');
 
 const development = `
 export const environment = {
-  AGILITY_PREVIEW: true,
+  AGILITY_PREVIEW: '${process.env.AGILITY_PREVIEW}',
   AGILITY_GUID: '${process.env.AGILITY_GUID}',
   AGILITY_API_FETCH_KEY: '${process.env.AGILITY_API_FETCH_KEY}',
   AGILITY_API_PREVIEW_KEY: '${process.env.AGILITY_API_PREVIEW_KEY}',
@@ -14,7 +14,7 @@ export const environment = {
 `;
 const production = `
 export const environment = {
-  AGILITY_PREVIEW: false,
+  AGILITY_PREVIEW: '${process.env.AGILITY_PREVIEW}',
   AGILITY_GUID: '${process.env.AGILITY_GUID}',
   AGILITY_API_FETCH_KEY: '${process.env.AGILITY_API_FETCH_KEY}',
   AGILITY_API_PREVIEW_KEY: '${process.env.AGILITY_API_PREVIEW_KEY}',

package.json

@@ -6,9 +6,13 @@
     "test": "ng test",
     "envinit": "node dotenv.config.js",
     "dev": "npm run envinit && ng serve",
-    "build": "npm run envinit && npm run prerender:routes && ng build --configuration production",
+    "build": "npm run agility-init && ng build --configuration production",
     "start": "ng serve --configuration production",
-    "prerender:routes": "tsc prerender-routes.ts && node prerender-routes.js"
+
+    "agility-init": "npm run envinit && npm run prerender:routes && npm run prerender:pages && npm run prerender:content",
+    "prerender:routes": "tsc prerender-routes.ts && node prerender-routes.js",
+    "prerender:pages": "tsc prerender-pages.ts && node prerender-pages.js",
+    "prerender:content": "tsc prerender-content.ts && node prerender-content.js"
   },
   "private": true,
   "dependencies": {

prerender-content.ts

@@ -0,0 +1,48 @@
+import { getApi } from '@agility/content-fetch';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as dotenv from 'dotenv';
+
+dotenv.config();
+
+
+const client = getApi({
+    guid: process.env['AGILITY_GUID'],
+    apiKey: process.env['AGILITY_API_FETCH_KEY'],
+    isPreview: Boolean(process.env['AGILITY_PREVIEW']),
+});
+
+const contentListsToPreRender = ['posts', 'categories'];
+
+async function prerenderPages() {
+
+    let allContentListsData: { [key: string]: any } = {};
+
+    for(const contentList of contentListsToPreRender) {
+
+        // Fetch the content list
+        const list = await client.getContentList({
+            referenceName: contentList,
+            languageCode: process.env['AGILITY_LOCALE'],
+            locale: process.env['AGILITY_LOCALE'],
+        });
+
+        // Add the list to the allContentListsData object
+        allContentListsData[contentList] = list;
+
+        console.log(`Fetched content list: ${contentList}`);
+    }
+
+    // Define the JSON output path for the aggregated data
+    const aggregatedJsonOutputPath = path.join(__dirname, 'src', 'app', 'agility', 'data', 'content.json');
+
+    // Ensure the directory exists
+    fs.mkdirSync(path.dirname(aggregatedJsonOutputPath), { recursive: true });
+
+    // Write the aggregated data to the JSON file
+    fs.writeFileSync(aggregatedJsonOutputPath, JSON.stringify(allContentListsData, null, 2), 'utf8');
+
+
+}
+
+prerenderPages();

prerender-pages.ts

@@ -0,0 +1,63 @@
+import { getApi } from '@agility/content-fetch';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as dotenv from 'dotenv';
+
+dotenv.config();
+
+const apiKey = process.env['AGILITY_API_FETCH_KEY'];
+const guid = process.env['AGILITY_GUID'];
+const locale = process.env['AGILITY_LOCALE'] || 'en-use';
+const channel = process.env['AGILITY_WEBSITE'] || 'website';
+
+const client = getApi({
+    guid,
+    apiKey,
+    isPreview: false
+});
+
+async function prerenderPages() {
+    // Fetch the sitemap
+    const sitemap = await client.getSitemapFlat({ languageCode: locale, channelName: channel, locale });
+
+    // Object to hold all page data
+    let allPageData: { [key: string]: { page: any, dynamicPageItem: any } } = {};
+
+    for (const pagePath in sitemap) {
+        if (sitemap.hasOwnProperty(pagePath)) {
+            const pageInSitemap = sitemap[pagePath];
+
+            // Fetch the page content
+            const pageContent = await client.getPageByPath({
+                pagePath,
+                channelName: channel,
+                locale
+            });
+
+            // Fetch the dynamic page item
+            let dynamicPageItem = null;
+            if(pageInSitemap.contentID) {
+            dynamicPageItem = await client.getContentItem({
+                contentID: pageInSitemap.contentID,
+                locale
+            });
+            }
+            // Add the page content to the allPageData object
+            allPageData[pagePath] = {
+                page: pageContent.page,
+                dynamicPageItem: dynamicPageItem
+            };
+        }
+    }
+
+    // Define the JSON output path for the aggregated data
+    const jsonOutputPath = path.join(__dirname, 'src', 'app', 'agility', 'data', 'pages.json');
+
+    // Ensure the directory exists
+    fs.mkdirSync(path.dirname(jsonOutputPath), { recursive: true });
+
+    // Write the aggregated data to the JSON file
+    fs.writeFileSync(jsonOutputPath, JSON.stringify(allPageData, null, 2), 'utf8');
+}
+
+prerenderPages();

src/app/agility/pages/components/components.component.ts

@@ -2,7 +2,6 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { AgilityComponentsDirective } from "./components.directive"
 import { AgilityComponentsService } from './components.service';
 
-
 @Component({
 	selector: 'agility-component',
 	standalone: true,
@@ -33,9 +32,9 @@ export class AgilityComponents implements OnInit {
 	loadComponent() {
 
 		//get the module name
-		let moduleName = this.moduleObj?.value.module;
-
+		let moduleName = this.moduleObj?.module;
 
+
 		let moduleType = this.agilityComponentsService.getComponent(moduleName) as any;
 		if (!moduleType) {
 			console.warn(`No module found for ${moduleName}`);
@@ -53,14 +52,14 @@ export class AgilityComponents implements OnInit {
 
 		// Ensure the item property is set
 		if (componentRef.instance?.hasOwnProperty('item')) {
-			(componentRef.instance as any).item = this.moduleObj?.value.item;
+			(componentRef.instance as any).item = this.moduleObj?.item;
 		}
 
 		// Ensure the data property is set
 		if (componentRef.instance?.hasOwnProperty('data')) {
 			(componentRef.instance as any).data = {
-				item: this.moduleObj?.value.item,
-				image: this.moduleObj?.value.image,
+				item: this.moduleObj?.item,
+				image: this.moduleObj?.item.image,
 				page: this.page,
 				dynamicPageItem: this.dynamicPageItem
 			};

src/app/agility/pages/components/featured-post/featured-post.component.ts

@@ -3,6 +3,7 @@ import { AgilityService } from '../../../agility.service';
 import { Router, RouterLink } from '@angular/router';
 import { NgIf } from '@angular/common';
 import { firstValueFrom } from 'rxjs';
+import PrerenderedAgilityContentLists from '../../../data/content.json'
 
 function decodeHTML(str: string): string {
   return str.replace(/&#(\d+);/g, (_, dec) => String.fromCharCode(dec));
@@ -39,6 +40,17 @@ export class ModuleFeaturedPost implements OnInit {
   }
 
   async ngOnInit(): Promise<void> {
+
+
+    const categoriesData = PrerenderedAgilityContentLists['categories'];
+    if(categoriesData){
+      this.state.set(CATEGORIES_KEY, categoriesData as any);
+    }
+
+
+
+
+
     try {
       let categoriesRes = this.state.get(CATEGORIES_KEY, null as any);
 

src/app/agility/pages/components/posts-listing/posts-listing.component.ts

@@ -3,6 +3,7 @@ import { AgilityService } from '../../../agility.service';
 import { htmlDecode } from 'js-htmlencode';
 import { firstValueFrom } from 'rxjs';
 import { NgForOf, NgIf } from '@angular/common';
+import PrerenderedAgilityContentLists from '../../../data/content.json'
 
 const POSTS_KEY = makeStateKey<any[]>('posts');
 
@@ -26,9 +27,25 @@ export class ModulePostsListingComponent implements OnInit {
   async ngOnInit(): Promise<void> {
     this.moduleData = this.data.item.fields;
 
-    // Check if the posts data is already available in the transfer state
-    this.posts = this.transferState.get(POSTS_KEY, null as any);
+    const postData = PrerenderedAgilityContentLists['posts'];
 
+    if(postData){
+      this.transferState.set(POSTS_KEY, postData as any);
+    }
+
+    // set the posts to the transfer state
+    this.posts = this.transferState.get(POSTS_KEY, null as any).items.map((p: any) => {
+      return {
+        title: p.fields.title,
+        slug: p.fields.slug,
+        date: new Date(p.fields.date).toLocaleDateString(),
+        image: p.fields.image,
+        content: p.fields.content,
+        category: p.fields.category.fields.title || 'Uncategorized'
+      };
+    })
+
+    // fallback to API if no data in transfer state
     if (!this.posts) {
       const postsRes = await firstValueFrom(this.agilityService.getContentList('posts'));
 

src/app/agility/pages/components/text-block-with-image/textblockwithimage.component.html

@@ -149,7 +149,7 @@
           </p>
           <a
             *ngIf="item.primaryButton"
-            [href]="item.primaryButton.href"
+            [routerLink]="item.primaryButton.href"
             [target]="item.primaryButton.target"
             class="
               inline-block

src/app/agility/pages/pages.component.html

@@ -2,9 +2,9 @@
 <ng-container *ngIf="pageStatus === 404">Page not found.</ng-container>
 <ng-container *ngIf="pageStatus === 500">Error loading page.</ng-container>
 <ng-container *ngIf="pageStatus === 200">
-    <ng-container *ngIf="page?.zones"></ng-container>
+    <ng-container *ngIf="page?.zones">
         <ng-container *ngFor="let zone of (page?.zones | keyvalue)">
-            <ng-container *ngFor="let moduleRef of (zone.value | keyvalue)">
+            <ng-container *ngFor="let moduleRef of zone.value">
                 <agility-component [moduleObj]="moduleRef" [page]="page" [dynamicPageItem]="dynamicPageItem">
                 </agility-component>
             </ng-container>