DEV Community: Syed Muhammad Haris

Step-by-Step Guide to Setting Up an Angular Application with CMS-Driven Architecture(Optimizely)

Syed Muhammad Haris — Tue, 23 Sep 2025 13:16:12 +0000

Syed Muhammad Haris

Sep 23 '25

Step-by-Step Guide to Setting Up an Angular Application with CMS-Driven Architecture(Optimizely)

#angular #optimizely #webdev #typescript

Comments

9 min read

Step-by-Step Guide to Setting Up an Angular Application with CMS-Driven Architecture(Optimizely)

Syed Muhammad Haris — Tue, 23 Sep 2025 07:18:37 +0000

In this blog, we’ll walk through how our Angular application is architected to work with a dynamic CMS setup using a custom library that acts as the bridge between Optimizely CMS and frontend rendering. We’ll explore the folder structure, routing flow, component loading, and how the dynamic component architecture works behind the scenes.

GitHub Repository

You can access the full source code of this project on GitHub:
View On GitHub

Folder Structure

Our Angular application is organized into three main folders:

1. DropComponents

Contains all components that are dropped via CMS into the PageComponents array or the Blocks drop in CMS Content area.
These components are dynamically rendered using a custom directive provided by our Angular library.

2. GlobalComponents

Contains global UI components such as Header and NotFoundComponent (404 page) etc.

3. Pages

Contains route-based page components.
Includes components that render entire CMS pages such as PageLayoutComponent and detailed content pages like NewsDetailsComponent.

Structure Looks Like:

src
└──app
├──DropComponents
│ ├── eservice
│ │ └── eservice.component.ts
│ └── hero
│ └── hero.component.ts
│
├──GlobalComponents
│ ├── header
│ │ └── header.component.ts
│ └── not-found
│ └── not-found.component.ts
│
├──Pages
│ ├── page-layout
│ │ └── page-layout.component.ts
│ └── news-details
│ └── news-details.component.ts
│
└──app-routing.module.ts

Step By Step Guide:

1. Create a New Angular Application

Run the following command:

ng new demo-app

2. Create Project Folders:

create the following directories or folders inside the src --> app

DropComponents
GlobalComponents
Pages

3. Generate the Layout Component

Inside the Global folder, generate a layoutComponent using the Angular CLI:

ng g c Global/layout

4. Generate the Page Layout Component

Inside the Pages folder, generate a pageLayoutComponent using the Angular CLI:

ng g c Pages/pageLayout

5. Now Setup Routing Architecture

Our Angular routing is designed such that any route ultimately resolves to the PageLayoutComponent, ensuring all CMS-driven pages go through a common entry point means whatever be the page route the hit will always come to the PageLayoutComponent.

In app-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: '**', component: PageLayoutComponent } // nested catch-all
    ]
  },

  { path: '**', redirectTo: '' }, // global catch-all
];

Response From Backend

we can receive two types of responses from the backend:

1️⃣ Response with [pageComponents] array:

This array contains all the CMS dropped blocks.
If it exists in the response, it means the page includes blocks that need to be rendered.
These blocks are rendered using the library directive libDynamicComponent.

{
    "data": {
        "Content": {
            "items": [
                {
                    "Type": "StartPage",
                    "LastModifiedDate": "2025-06-03T09:44:34Z",
                    "breadcrumbs": {
                        "Content": {
                            "items": []
                        }
                    },
                    "PageModifiedDateTokenText": "Last Modified Date: {0} Saudi Arabia Time"
                    "BreadcrumbTitle": "Home",
                    "PageComponents": [
                        {
                            "ContentLink": {
                                "Expanded": {
                                    "Type": "HeroBlock",
                                    "OverHeadingText": "Hero",
                                    "Heading": "Hero",
                                    "Description": "Seamless tourism services, available"
                                }
                            }
                        },
                        {
                            "ContentLink": {
                                "Expanded": {
                                    "Type": "EServiceBlock",
                                    "OverHeadingText": "Smart Tourism Services",
                                    "Heading": "E-services",
                                    "Description": "Seamless tourism services, available anytime, anywhere. Access permits, licenses, and essential development tools instantly through our advanced digital platform—designed to streamline and elevate your tourism experience.",
                                    "EServiceCTAUrl": {
                                        "Title": "View all",
                                        "Name": "View all",
                                        "Target": "_self",
                                        "Url": "/en/e-services"
                                    },
                                    "DetailCTAText": "Details",
                                    "StartServiceCTAText": "Start Service"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    }
}

2️⃣ Response without [pageComponents] array:

In this case, the page is loaded only through its page properties.
There are no additional components or dropped blocks in the CMS.
Such pages are rendered using ViewContainerRef[#dynamicContainer].

{
    "data": {
        "Content": {
            "items": [
                {
                    "Type": "LeadershipDetailPage",
                    "LastModifiedDate": "2025-05-27T06:18:14Z",
                    "PageModifiedDateTokenText": "Last Modified Date: {0} Saudi Arabia Time",
                    "PageTitle": "About Tourism",
                    "SubTitle": "",
                    "PageShortDescription": ""
                    },
                    "HideSpotlight": false,
                    "HideBreadcrumb": false,
                    "HideShareButton": true,
                    "HidePrintButton": true,
                    "PageImage": {
                        "Expanded": {
                            "Url": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af",
                            "AltText": "",
                            "ProportionsImages": [
                                {
                                    "XXLImage": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af&width=1400&height=408&rxy=0.5,0.5",
                                    "XLImage": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af&width=1200&height=350&rxy=0.5,0.5",
                                    "LGImage": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af&width=992&height=289&rxy=0.5,0.5",
                                    "MDImage": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af&width=768&height=224&rxy=0.5,0.5",
                                    "SMImage": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af&width=576&height=168&rxy=0.5,0.5"
                                }
                            ]
                        }
                    },
                    "HideViewBioLink": false,
                    "LeadershipTitle": "Her Highness Princess Haifa Bint Mohammad Al Saud",
                    "LeadershipSubTitle": "Vice Minister of Tourism",
                    "SocialLinkData": [
                        {
                            "Name": "Linked in",
                            "IconCss": "hgi-stroke hgi-linkedin-02",
                            "Url": "https://linkedin.com/"
                        },
                        {
                            "Name": "X",
                            "IconCss": "hgi-stroke hgi-new-twitter",
                            "Url": "https://x.com/"
                        },
                        {
                            "Name": "Facebook",
                            "IconCss": "hgi-stroke hgi-facebook-02",
                            "Url": "https://facebook.com/"
                        },
                        {
                            "Name": "Youtube",
                            "IconCss": "hgi-stroke hgi-youtube",
                            "Url": "https://youtube.com/"
                        }
                    ],
                    "LeadershipPageImage": {
                        "Expanded": {
                            "Url": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1",
                            "AltText": "",
                            "ProportionsImages": [
                                {
                                    "XXLImage": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1&width=1400&height=408&rxy=0.55,0.46",
                                    "XLImage": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1&width=1200&height=350&rxy=0.55,0.46",
                                    "LGImage": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1&width=992&height=289&rxy=0.55,0.46",
                                    "MDImage": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1&width=768&height=224&rxy=0.55,0.46",
                                    "SMImage": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1&width=576&height=168&rxy=0.55,0.46"
                                }
                            ]
                        }
                    }
                }
            ]
        }
    }
}

For a more detailed explanation about responses, you can check out the full blog here: Building a Dynamic CMS-Driven Angular App Using Optimizely & a Custom BFF Architecture

Install Angular Library In our Application

First, paste the dist folder of library into the project’s root directory and rename it to lib.

Now, Run the below command to install a Library

 npm install .\lib\optimizely-cms-integration

⚠️Note: The library name is optimizely-cms-integration. When you build the library, the dist folder will contain a subfolder with your library’s name—in my case, it is optimizely-cms-integration.

Component Code and Responsibilities:

1️⃣ In layout.component.html inside the GlobalComponents folder:

The LayoutComponent provides a consistent layout for all pages by rendering a global and a :

<app-header ngSkipHydration></app-header>
<div class="content">
    <router-outlet></router-outlet>
</div>

2️⃣ Create Drop Components

In the CMS content area, we now have two dropped components (as shown in the pageComponents array in the response above). Suppose the Start Page consists of these two components, each with its own design.

To set this up, generate two components inside the DropComponents folder using the following commands:

ng g c DropComponents/hero
ng g c DropComponents/eservice

In hero.component.ts:

import { Component, Inject, Input, PLATFORM_ID, ViewEncapsulation } from '@angular/core';


@Component({
    selector: 'app-hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css'],
    encapsulation: ViewEncapsulation.None,
    standalone: false
})


export class HeroComponent {
    @Input() data: any; //CMS-response of this Block
}

In e-services.component.ts:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-e-services',
    templateUrl: './e-services.component.html',
    styleUrls: ['./e-services.component.css'],
    standalone: false
})

export class EServicesComponent {
  @Input() data: any; //CMS-response of this Block

}

⚠️Note: The data variable here contains all the content for this component from the pageComponents array. After receiving the data in your component, you can design and structure it as you want.

3️⃣ Create a Page Component (Without pageComponents Array)

Next, we’ll create another component for a page type that doesn’t use the pageComponents array and instead depends only on its page properties. For example, a Leadership Details page.

Run the following command to generate a component inside the pages folder:

ng g c pages/leadership-details

In leadership-details.component.ts:

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-leadership-details',
  standalone: false,
  templateUrl: './leadership-details.component.html',
  styleUrl: './leadership-details.component.css'
})
export class LeadershipDetailsComponent {
  @Input() data: any //CMS-response of this Page

}

4️⃣ In page-layout.component.ts:

First, we’ll set up the registries that will be used for CMS pages and the dropped blocks within the CMS content area.

//CMS Drop Block Registries:

export const COMP_REGISTRY: { [key: string]: () => Promise<any> } = {
  HeroBlock: () =>
    import('../../DropComponents/hero/hero.component').then((m) => m.HeroComponent),
  EServiceBlock: () =>
    import('../../DropComponents/e-services/e-services.component').then((m) => m.EServicesComponent)
};

//CMS page Registries:

export const PAGE_REGISTRY: { [key: string]: () => Promise<any> } = {
  ...COMP_REGISTRY,
  LeadershipDetailPage: () =>
    import('../leadership-details/leadership-details.component')
      .then(m => m.LeadershipDetailsComponent)
};

Secondly, register these registries in the library by using the functions: setPageRegistry(PAGE_REGISTRY) and setComponentRegistry(COMP_REGISTRY).”

import { OptimizelyCmsIntegrationService } from 'optimizely-cms-integration';


 constructor(
    private dynamicLoader: OptimizelyCmsIntegrationService, private router: Router
  ) {

      // CMS Page registry mapping in library
          this.dynamicLoader.setPageRegistry(PAGE_REGISTRY);

      //CMS Drop Blocks registry mapping in library
          this.dynamicLoader.setComponentRegistry(COMP_REGISTRY);
  }

Next, we’ll use the library method getPageContent(baseURL, router.url) to fetch the response and pass it to the renderPages() function along with our custom ViewContainerRef. After that, we’ll call the renderComponents() function, which uses the directive in the library as a container to handle the responses.

By calling these functions:

If the response depends entirely on page properties, the library will look into the Pages folder and load the appropriate component from there.
If the response contains dropped blocks in the CMS content area (via the pageComponents array), those blocks will be rendered accordingly from DropComponents folder.

import { Router, NavigationEnd } from '@angular/router';
import { Component, ViewChild, OnInit, AfterViewInit, OnDestroy, ViewContainerRef, Injector, NgZone } from '@angular/core';
import { OptimizelyCmsIntegrationService } from 'optimizely-cms-integration';
import { DynamicComponentDirective } from 'optimizely-cms-integration';
import { catchError, map, of, Subscription } from 'rxjs';



//Drop Components Directive 
@ViewChild(DynamicComponentDirective, { static: true }) dynamicHost!: DynamicComponentDirective;

//Page Component ViewContainerRef
@ViewChild('dynamicContainer', { read: ViewContainerRef, static: true })
  dynamicContainer!: ViewContainerRef;

getNewCompletePageData() {

  const baseURL = "your Backend CMS Base URL"

  this.dynamicLoader.getPageContent(baseURL,this.router.url).subscribe({
        next: (data: any) => {
          if (data) {
            // Render a pages dynamically
            this.dynamicLoader.renderPages(data.Type, data, this.dynamicContainer);

            // Render a component dynamically     
          this.dynamicLoader.renderComponents(this.dynamicHost.viewContainerRef, data);

          }
        }
      });

}

Overall Code snippet of "page-layout.component.ts"

import { Router, NavigationEnd } from '@angular/router';
import { Component, ViewChild, OnInit, AfterViewInit, OnDestroy, ViewContainerRef, Injector, NgZone } from '@angular/core';
import { OptimizelyCmsIntegrationService } from 'optimizely-cms-integration';
import { DynamicComponentDirective } from 'optimizely-cms-integration';
import { catchError, map, of, Subscription } from 'rxjs';

//CMS Drop Block Registries:

export const COMP_REGISTRY: { [key: string]: () => Promise<any> } = {
  HeroBlock: () =>
    import('../../DropComponents/hero/hero.component').then((m) => m.HeroComponent),
  EServiceBlock: () =>
    import('../../DropComponents/e-services/e-services.component').then((m) => m.EServicesComponent)
};

//CMS page Registries:

export const PAGE_REGISTRY: { [key: string]: () => Promise<any> } = {
  ...COMP_REGISTRY,
  LeadershipDetailPage: () =>
    import('../leadership-details/leadership-details.component')
      .then(m => m.LeadershipDetailsComponent)
};

@Component({
  selector: 'app-page-layout',
  templateUrl: './page-layout.component.html',
  styleUrls: ['./page-layout.component.css'],
  standalone: false
})
export class PageLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
//Drop Components Directive 
@ViewChild(DynamicComponentDirective, { static: true }) dynamicHost!: DynamicComponentDirective;

//Page Component ViewContainerRef
@ViewChild('dynamicContainer', { read: ViewContainerRef, static: true })
  dynamicContainer!: ViewContainerRef;


private routeSubscription!: Subscription;

constructor(private dynamicLoader: OptimizelyCmsIntegrationService, private router: Router) 
  {

      // CMS Page registry mapping in library
          this.dynamicLoader.setPageRegistry(PAGE_REGISTRY);

      //CMS Drop Blocks registry mapping in library

       this.dynamicLoader.setComponentRegistry(COMP_REGISTRY);
  }


  ngOnInit() {
  this.routeSubscription = this.router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
          this.getNewCompletePageData();
        }
      });

}


getNewCompletePageData() {

  const baseURL = "your Backend CMS Base URL"

  this.dynamicLoader.getPageContent(baseURL,this.router.url).subscribe({
        next: (data: any) => {
          if (data) {
            // Render a pages dynamically
            this.dynamicLoader.renderPages(data.Type, data, this.dynamicContainer);

            // Render a component dynamically     
          this.dynamicLoader.renderComponents(this.dynamicHost.viewContainerRef, data);

          }
        }
      });

}

  //single layout so router subscription destroty
  ngOnDestroy() {
    if (this.routeSubscription) {
      this.routeSubscription.unsubscribe();
    }
  }


}

5️⃣ In page-layout.component.html:


<!-- This  dynamicContainer here is responsible to show component which will be load from page properties-->
<ng-container  #dynamicContainer></ng-container>


<main className='Page-container'>
   <div>
       <section>
         <!-- This  libDynamicComponent here is responsible to show drop component on page-->
         <ng-template  libDynamicComponent></ng-template>
       </section>
   </div>
</main>

Explanation:

#dynamicContainer: Used for rendering components based on page Properties.
libDynamicComponent: A library directive responsible for rendering all DropComponents placed on the CMS page. It also supports dynamic component reordering—if a block is reordered or its position is changed in the CMS content area, the update will be reflected in the UI after a hard refresh. On the frontend, you don’t need to manually adjust or replace the order of dropped components; the library handles it automatically.

How the Page Rendering Flow Works

Step-by-Step

User visits a URL → Routed to PageLayoutComponent via LayoutComponent.
Call getNewCompletePageData() inside PageLayoutComponent:
- Uses library method: this.dynamicLoader.getPageContent(baseURL, this.router.url)
- This hits Backend CMS endpoint and gets CMS page data.
Once data is received:
- First, the layout/page is rendered using the pageProperties via the library method renderPages(). The data is then passed to the component by checking the Type keyword in backend response and matching it against the PAGE_REGISTRY.
- Next, the dropped components on the CMS page are rendered using the library method renderComponents(). The data is passed to each component by checking the Type keyword in backend response and matching it against the COMP_REGISTRY.

⚠️Note: This is how you can render all types of pages and blocks on the frontend. Whatever pages or blocks you create in the CMS, you simply need to map them in the registries and design their markup on the frontend. The library methods will then handle passing the data to the correct components automatically.

Summary

By keeping all CMS logic and bindings encapsulated within a reusable Angular library, this architecture ensures a clean separation of concerns. All dynamic rendering decisions are based on CMS response keys (Type) and tied to Angular components via registries.

This results in a highly dynamic and CMS-author-driven site experience where frontend developers only need to map the component registry and design the components — the rendering is fully automated.

Refer to a previous blog "Building a Dynamic CMS-Driven Angular App Using Optimizely & a Custom BFF Architecture" for more on how the BFF integrates and delivers this structure.

Coming Soon

How to Achieve OPE (On-Page Editing) in CMS like Optimizely

Follow Me

Connect with me on LinkedIn to stay updated with my latest blogs, tutorials, and projects:
Syed_Muhammad_Haris

SSR Enabling In Angular with Real world Scenario along with the code...

Syed Muhammad Haris — Tue, 16 Sep 2025 11:40:57 +0000

✨ Enabling SSR (Server-Side Rendering) in Angular Application

Syed Muhammad Haris ・ Sep 16

#webdev #angular #ssr #optimizely

Optimizely CMS With Angular In Decoupled Environment

Syed Muhammad Haris — Tue, 16 Sep 2025 11:39:48 +0000

Syed Muhammad Haris

Sep 16 '25

Building a Dynamic CMS-Driven Angular App Using Optimizely & a Custom BFF Architecture

#angular #optimizely #dotnet #javascript

Comments

8 min read

Enabling SSR (Server-Side Rendering) in Angular Application

Syed Muhammad Haris — Tue, 16 Sep 2025 11:31:41 +0000

In this blog post, we’ll walk through how to enable Server-Side Rendering (SSR) in an Angular application. We’ll explore a real-world scenario and see step by step how SSR helps us solve it.

Why Add SSR?

Angular typically renders content in the browser, which isn’t optimal for search engines or initial load performance. SSR enables:

Search engine indexing of dynamic content
Fast first-paint and improved Time-to-Interactive (TTI)
Custom HTTP status codes like 404
Preview rendering for CMS editors

Scenario: Handling Custom HTTP Status Codes (e.g., 404)

Imagine you have different pages in your Angular app that need to return specific HTTP status codes.

For example, when a page is not found, you want the server to send back a proper ** 404** status code.

Normally, Angular applications running in the browser cannot send HTTP status codes. However, with SSR, we can inject the server’s response object and return custom status codes like 404 (Not Found).

Library Used

We use @nguniversal/express-engine, which provides an Express-based server adapter to render Angular on the server.

Step-by-Step Setup for SSR

Step 1: Add Angular Universal

Run the following command to add Angular Universal:

ng add @nguniversal/express-engine

Step 2: Verify File Structure

After the command, ensure the following files exist:

server.ts
main.ts
main.server.ts
Updated angular.json with server target

File Updates and Configuration

In server.ts

Make sure the server.ts file looks like this to support client-side routing:

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine, isMainModule } from '@angular/ssr/node';
import express from 'express';
import { dirname, join, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import AppServerModule from './main.server';
import { RESPONSE } from '@nguniversal/express-engine/tokens';
import https from 'https';
import fs from 'fs';

const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');

const httpsOptions = {
  key: fs.readFileSync('./ssl-certificates/ssl.key'),
  cert: fs.readFileSync('./ssl-certificates/ssl.crt')
};

const app = express();
const commonEngine = new CommonEngine();

app.get(
  '**',
  express.static(browserDistFolder, {
    maxAge: '1y',
    index: 'index.html'
  }),
);

app.get('**', (req, res, next) => {
  const { protocol, originalUrl, baseUrl, headers } = req;

  commonEngine
    .render({
      bootstrap: AppServerModule,
      documentFilePath: indexHtml,
      url: `${protocol}://${headers.host}${originalUrl}`,
      publicPath: browserDistFolder,
      providers: [
        { provide: APP_BASE_HREF, useValue: baseUrl },
        { provide: RESPONSE, useValue: res }
      ],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});

if (isMainModule(import.meta.url)) {
  const port = process.env['PORT'] || 4200;
  https.createServer(httpsOptions, app).listen(port, () => {
    console.log(`🚀 Angular SSR server running at https://localhost:${port}`);
  });
}

export default app;

In main.ts

/// <reference types="@angular/localize" />
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

In main.server.ts

export { AppServerModule as default } from './app/app.module.server';

⚠️Note: By updating the code in the file mentioned above, you can enable SSR in your Angular application.

🌍 How to Run SSR ?

You need to add a server script in package.json. In some cases, it’s added by default, but if not, you’ll need to add it manually as shown below:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "serve:ssr:Demo_App": "node dist/demo-app/server/server.mjs"
}

⚠️ Replace "Demo_App" and "demo-app" with your actual project name.

Then, Run this command:

npm run serve:ssr:Demo_App

Real-World Use Case

SSR 404 Page Example

Now we will change the Status code of our specific component which will be render when ever we get the response code 404 then it will update the status code of that page to 404.

To handle 404 responses in our Angular SSR app, we’ll follow these steps:

1. Create a 404 Page Component

Build a dedicated component that will be rendered whenever the backend returns a 404 response.

2. Use the Page Registry

With the help of the page registry(PAGE_REGISTRY) we created in the previous blog (Heading: "Component Registries (The Bridge)") Building a Dynamic CMS-Driven Angular App Using Optimizely & a Custom BFF Architecture, our library can detect when the response contains a 404 status.
Once detected, it will automatically map and route the response to the new 404 component.

3. Render the 404 Page Component

When the 404 component is triggered, it receives the response data.
At this point, we replace the existing logic with the code shown below to update the HTTP status code to 404.

import { RESPONSE } from '@nguniversal/express-engine/tokens';

constructor(
  private router: Router,
  @Optional() @Inject(RESPONSE) private response: any
) {}

ngOnInit(): void {
  if (this.response) {
    this.response.statusCode = 404;
    this.response.statusMessage = 'Page Not Found';
  }
}

⚠️ Note: Using the above code, you can easily update the status code of any page or component in Angular.

4. Architecture Note

This flow is fully compatible with the BFF (Backend for Frontend) architecture I’m using.
However, you can also customize and update HTTP status codes in your own project based on different conditions or requirements.

Final Thoughts

Enabling SSR in Angular using Angular Universal gives you a huge SEO and performance boost while keeping all the client-side flexibility of Angular.

Use this setup to build production-ready, CMS-driven, and search engine–friendly Angular applications!

Follow Me

Connect with me on LinkedIn to stay updated with my latest blogs, tutorials, and projects:
Syed_Muhammad_Haris

Building a Dynamic CMS-Driven Angular App Using Optimizely & a Custom BFF Architecture

Syed Muhammad Haris — Tue, 16 Sep 2025 06:32:19 +0000

In the era of content-rich web experiences, managing complex frontend logic with decoupled CMS data can be challenging.

In this post, we’ll explore a robust Back-End for Front-End (BFF) pattern using:

Angular
Optimizely Content Graph
A custom Angular library for dynamic component rendering

⚠️Note: We've built custom backend APIs that interact with the Optimizely Content Graph and return frontend-friendly responses.

How It Works – End-to-End Flow

When a user visits any CMS page:

The user navigates to a route in the Angular app.
PageLayoutComponent is triggered — the shell component for rendering.
It calls a method from our Angular library, which:
- Hits our custom backend API.
- That in turn queries the Content Graph.
The API response includes:
- Page metadata (title, subtitle, etc.)
- Page Type
- Drop components (Hero, Tabs, Cards, etc.)
The library:
- Determines if the page is rendered entirely via its type
- Or composed from drop components

Architecture at a Glance

Key Components

Optimizely CMS: Content authors manage content.
Custom Backend APIs: Fetch from Content Graph and shape data.
Angular Library: Dynamically renders components based on CMS type.
PageLayoutComponent: The main entry point for CMS-driven routes.

What Happens When a User Visits a Page?

Let’s walk through the interaction step-by-step:

User navigates to /leadership/john-doe
Angular loads PageLayoutComponent via routing
getPageContent() is called with the current URL
Backend returns:

{
  "Type": "LeadershipDetailPage",
  "PageComponents": [
    { "Type": "HeroBlock", ... }
  ]
}

The Angular library:
1. Loads LeadershipDetailPage from the Page Registry
2. Injects it into the layout container
3. If drop components exist:
  - Injects them using the Component Registry via a directive.

This approach supports both template-driven pages and CMS-composed pages using a single layout.

What Happens When a Page Loads

In my Angular app, the router is configured to redirect all CMS paths or routes to the PageLayoutComponent, as shown in the routing setup below:

In app-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: '**', component: PageLayoutComponent } // nested catch-all
    ]
  },

  { path: '**', redirectTo: '' }, // global catch-all
];

It calls:

getPageContent(baseURL, router.url) --> This library method calls the backend and retrieves the page response for the specified route.

In page-layout.component.ts:

ngOnInit(){
    const baseURL = typeof window !== 'undefined' ? (window as any).env?.apiUrl : '';

    this.dynamicLoader.getPageContent(baseURL,this.router.url).subscribe({
      next: (data: any) => {
        if (data) {
          console.log('data',data);
        }
      }
    });
}

The backend returns:
1. PageType: to determine which full-page component to load
2. pageComponents: drop components like Hero, Cards, etc.

The response is shown below:


{
    "data": {
        "Content": {
            "items": [
                {
                    "Type": "StartPage",
                    "LastModifiedDate": "2025-06-03T09:44:34Z",
                    "breadcrumbs": {
                        "Content": {
                            "items": []
                        }
                    },
                    "PageModifiedDateTokenText": "Last Modified Date: {0} Saudi Arabia Time"
                    "BreadcrumbTitle": "Home",
                    "PageComponents": [
                        {
                            "ContentLink": {
                                "Expanded": {
                                    "Type": "HeroBlock",
                                    "OverHeadingText": "Hero",
                                    "Heading": "Hero",
                                    "Description": "Seamless tourism services, available"
                                }
                            }
                        },
                        {
                            "ContentLink": {
                                "Expanded": {
                                    "Type": "EServiceBlock",
                                    "OverHeadingText": "Smart Tourism Services",
                                    "Heading": "E-services",
                                    "Description": "Seamless tourism services, available anytime, anywhere. Access permits, licenses, and essential development tools instantly through our advanced digital platform—designed to streamline and elevate your tourism experience.",
                                    "EServiceCTAUrl": {
                                        "Title": "View all",
                                        "Name": "View all",
                                        "Target": "_self",
                                        "Url": "/en/e-services"
                                    },
                                    "DetailCTAText": "Details",
                                    "StartServiceCTAText": "Start Service"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    }
}

Understanding Page Types

Pages Rendered from Page Properties

Some pages, such as LeadershipDetailPage, are rendered entirely based on their CMS type. This means that when a user visits the URL, these pages don’t include any drop components in the CMS content area means in the response their is no pageComponents[] array. Instead, all of their details are contained within the items[] array.

Response looks like:


{
    "data": {
        "Content": {
            "items": [
                {
                    "Type": "LeadershipDetailPage",
                    "LastModifiedDate": "2025-05-27T06:18:14Z",
                    "PageModifiedDateTokenText": "Last Modified Date: {0} Saudi Arabia Time",
                    "PageTitle": "About Tourism",
                    "SubTitle": "",
                    "PageShortDescription": ""
                    },
                    "HideSpotlight": false,
                    "HideBreadcrumb": false,
                    "HideShareButton": true,
                    "HidePrintButton": true,
                    "PageImage": {
                        "Expanded": {
                            "Url": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af",
                            "AltText": "",
                            "ProportionsImages": [
                                {
                                    "XXLImage": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af&width=1400&height=408&rxy=0.5,0.5",
                                    "XLImage": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af&width=1200&height=350&rxy=0.5,0.5",
                                    "LGImage": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af&width=992&height=289&rxy=0.5,0.5",
                                    "MDImage": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af&width=768&height=224&rxy=0.5,0.5",
                                    "SMImage": "https://cms-url/siteassets/about-us/leadership/leaadership_banner.jpg?code=49b3af&width=576&height=168&rxy=0.5,0.5"
                                }
                            ]
                        }
                    },
                    "HideViewBioLink": false,
                    "LeadershipTitle": "Her Highness Princess Haifa Bint Mohammad Al Saud",
                    "LeadershipSubTitle": "Vice Minister of Tourism",
                    "SocialLinkData": [
                        {
                            "Name": "Linked in",
                            "IconCss": "hgi-stroke hgi-linkedin-02",
                            "Url": "https://linkedin.com/"
                        },
                        {
                            "Name": "X",
                            "IconCss": "hgi-stroke hgi-new-twitter",
                            "Url": "https://x.com/"
                        },
                        {
                            "Name": "Facebook",
                            "IconCss": "hgi-stroke hgi-facebook-02",
                            "Url": "https://facebook.com/"
                        },
                        {
                            "Name": "Youtube",
                            "IconCss": "hgi-stroke hgi-youtube",
                            "Url": "https://youtube.com/"
                        }
                    ],
                    "LeadershipPageImage": {
                        "Expanded": {
                            "Url": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1",
                            "AltText": "",
                            "ProportionsImages": [
                                {
                                    "XXLImage": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1&width=1400&height=408&rxy=0.55,0.46",
                                    "XLImage": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1&width=1200&height=350&rxy=0.55,0.46",
                                    "LGImage": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1&width=992&height=289&rxy=0.55,0.46",
                                    "MDImage": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1&width=768&height=224&rxy=0.55,0.46",
                                    "SMImage": "https://cms-url/contentassets/91bc22483f704dc6a2e244d247a44a0a/haifa-bint-mohammad-al-saud.jpg?code=49bcf1&width=576&height=168&rxy=0.55,0.46"
                                }
                            ]
                        }
                    }
                }
            ]
        }
    }
}

Pages with Drop Components

Other pages, such as Home or StartPage, rely on dropped blocks in the CMS editor. This means the page details are defined through specific blocks in the CMS, which are then rendered as different components on the frontend:

HeroBlock
EServiceBlock

From the backend response, you can determine that there are two types of pages. The first type loads directly, meaning the page is fully dependent on its page properties, and the response should be passed to that specific component. The second type includes dropped components, where each part of the response is mapped to its corresponding Angular component—for example, a HeroBlock response maps to the HeroComponent, and an EServiceBlock response maps to the EServiceComponent.

The response here is the same as the one shown above under heading "What Happens When a Page Loads" point no. 3.

Component Registries (The Bridge)

To implement this technique, you need a mapping mechanism that links the Type coming in the response to the component that should be rendered.

Next, we’ll create two registries in our Angular app to define which Angular component should be loaded based on the Type received in the response. The first registry will handle pages that are rendered entirely from page properties, while the second will handle pages composed of dropped components(pageComponents[] array in response).

Drop Component Registry

This registry ensures that the correct Angular component is rendered for each Type found in the pageComponents[] array (dropped components from the CMS).

In page-layout.component.ts [above ngOnInit()]:

export const COMP_REGISTRY = {
  HeroBlock: () => import('../../DropComponents/hero/hero.component')
.then(m => m.HeroComponent),
  EServiceBlock: () => import('../../DropComponents/eservice/eservice.component')
.then(m => m.EServiceComponent),
};

Page Registry (Pages directly load from properties)

This registry ensures that the correct Angular component is rendered for Type found in the items[] array in the main response.

In page-layout.component.ts [above ngOnInit()]:

export const PAGE_REGISTRY = {
  NewsDetailPage: () => import('../news-details/news-details.component')
.then(m => m.NewsDetailsComponent),
 ErrorPage404Block: () =>
    import('../../GlobalComponents/not-found/not-found.component').then((m) => m.NotFoundComponent),
};

After retrieving the response from getPageContent(), we register the two registries in the library using the methods shown below.

//Properties render page registry mapping in library
 this.dynamicLoader.setPageRegistry(PAGE_REGISTRY);

//Drop component registry mapping in library
 this.dynamicLoader.setComponentRegistry(COMP_REGISTRY);

The library exposes setPageRegistry() and setComponentRegistry() so the main app provides mappings.

In the future, our Angular library directive will use these registries to pass data to the appropriate components—whether it’s a direct page which renders from properties or dropped components within a page.

Dynamic Rendering Based on ViewContainerRef

For pages rendered directly from page properties, use a @ViewChild decorator to access the ViewContainerRef. This allows the Angular library to dynamically inject the appropriate components into it.

Once the container is initialized, we pass the data, its Type, and the containerRef to the library method renderPages(data.Type, data, this.dynamicContainer). The renderPages(type, response, containerRef) method then looks up the registry (PAGE_REGISTRY) to match the Type, injects the corresponding Angular component into the container, and provides it with the relevant data from the backend response.

In page-layout.component.ts

@ViewChild('dynamicContainer', { read: ViewContainerRef, static: true })
dynamicContainer!: ViewContainerRef;

ngOnInit(){
    const baseURL = typeof window !== 'undefined' ? (window as any).env?.apiUrl : '';

    this.dynamicLoader.getPageContent(baseURL,this.router.url).subscribe({
      next: (data: any) => {
        if (data) {

          // Render a pages dynamically which is depend on page properties
          this.dynamicLoader.renderPages(data.Type, data, this.dynamicContainer);
        }
      }
    });
}

In page-layout.component.html

<ng-container  #dynamicContainer></ng-container>

Directive-Based Dynamic Rendering

Create a custom directive that exposes a ViewContainerRef.
Use @ViewChild to get a reference to that directive in your component.
Pass the directive’s viewContainerRef along with the backend data to the renderComponents() method.
The library checks the COMP_REGISTRY to find which Angular component matches the Type from the response.
The matched component is then injected into the container and receives the data.

In page-layout.component.ts

@ViewChild(DynamicComponentDirective, { static: true }) dynamicHost!: DynamicComponentDirective;

ngOnInit(){
    const baseURL = typeof window !== 'undefined' ? (window as any).env?.apiUrl : '';

    this.dynamicLoader.getPageContent(baseURL,this.router.url).subscribe({
      next: (data: any) => {
        if (data) {

           // Render a component dynamically
    this.dynamicLoader.renderComponents(this.dynamicHost.viewContainerRef, data);
        }
      }
    });
}

In page-layout.component.html

  <ng-template  libDynamicComponent></ng-template>

Behind the Scenes:

Components are extracted from PageComponents.
Each block is matched by its Type (e.g., HeroBlock).
The library uses the component registry to lazy-load and inject the corresponding Angular component.
CMS data is passed into the component via @Input() bindings.

This directive approach allows editors to add, remove, or reorder blocks in the CMS — and the Angular app reflects changes automatically at runtime.

Real-Time SSR Adaptation (Server-Side Rendering with Angular Universal)

To make this system SEO-friendly and search engine discoverable, we use Angular Universal for server-side rendering (SSR).

Why Add SSR?

While Angular renders content in the browser by default, SSR enables:

Search engine indexing of dynamic content
Fast first-paint and Time-to-Interactive (TTI)
Custom HTTP status codes (like 404s)
Preview rendering for CMS editors

🔧 Library Used: @nguniversal/express-engine

Angular Universal provides an Express-based server adapter. We use it to inject HTTP-level logic inside Angular components.

Step-by-Step Setup for SSR: Enabling SSR (Server-Side Rendering) in Angular Application

SSR + Dynamic CMS = Best of Both Worlds

With Angular Universal + Dynamic Component Directive:

Your content loads instantly on first hit
CMS changes reflect in real time
Proper HTTP responses are delivered from the server
Search engines can fully crawl and understand your content

This makes your Angular frontend fully compatible with modern CMS needs while staying SEO-compliant and dynamic.

Why This Pattern Works

Separation of Concerns
Angular handles presentation, while APIs handle data shaping.

Flexibility
Editors can build structured or composable pages.

Scalability
New components? Just update the registry.

SSR Ready
This works with Angular Universal.

Reusability
Drop components are modular and lazy-loaded.

Key Benefits

CMS Flexibility: Build pages freely with or without blocks

Dynamic Rendering: Powered by simple backend mappings

Maintainability: Registries make it easy to plug and play

Performance: Components load only when needed

SSR Compatibility: Angular Universal plays nicely with dynamic rendering.

Conclusion

By combining:

Angular’s dynamic loading
A smart, registry-based Angular library
A custom BFF layer
And Optimizely CMS

…you get a scalable, maintainable, CMS-flexible frontend architecture.

Whether rendering full-page types or dynamic blocks — this system ensures your content is powerful, flexible, and consistent.

Related Articles

Coming Soon

How to Achieve OPE (On-Page Editing) in CMS like Optimizely

Follow Me

Connect with me on LinkedIn to stay updated with my latest blogs, tutorials, and projects:
Syed_Muhammad_Haris