Embed published RuleCMS widgets in Angular

If your product is Angular — or Angular on the admin shell and something else on the marketing site — you can still buy RuleCMS and keep that architecture. Editors get the visual composer, device preview, staging, and production. You get a standalone widget component, a provider for the token and libraries, and the same published keys every other SDK uses.

What Angular renders today is the default RuleCMS card set: text, images, video, icons, buttons, dividers, embeds, lists, and accordions. That covers a long customer journey — campaigns, FAQs, studio pages, and calls to action — without asking you to rewrite the host app. Custom design-system registration in the composer is the React-only depth; the rest of the product is yours on Angular.

Install both packages. Register @rulecms/source-components-angular as the default library. Wrap the tree with rulecms-widget-provider so every widget on the page shares the token. Peer dependencies are Angular 17 or newer.

1import { Component } from "@angular/core";2import {3  RuleCMSWidgetComponent,4  RuleCMSWidgetProviderComponent,5} from "@rulecms/widget-angular";6import * as sourceComponents from "@rulecms/source-components-angular";78@Component({9  standalone: true,10  imports: [RuleCMSWidgetProviderComponent, RuleCMSWidgetComponent],11  template: `12    <rulecms-widget-provider [token]="token" [libraries]="libraries">13      <rulecms-widget14        [publishedKey]="publishedKey"15        [componentProps]="componentProps"16      />17    </rulecms-widget-provider>18  `,19})20export class HomepageHero {21  token = "your-environment-token";22  publishedKey = "your-widget-key";23  libraries = { default: sourceComponents };24  componentProps = {25    "b721c4e2-…": { onClick: (event: Event) => console.log("cta", event) },26  };27}

• Staging and production: plain token + environmentId---widget-… published key, served from widget-cache.
• Development: dev. token + draft widget-… key for live drafts.

Fetch on the server (or at build time), then render with mode="pre-fetched" so images and copy are in the first HTML. The client does not refetch and does not need the token. Pre-fetched mode uses CSS breakpoint variants so the server HTML matches every viewport.

1import { fetchRuleCMSWidget } from "@rulecms/widget-angular";23const data = await fetchRuleCMSWidget({4  publishedKey: process.env["RULECMS_PUBLISHED_KEY"]!,5  token: process.env["RULECMS_TOKEN"]!,6});

Token setup: projects, environments, and tokens.

Pass componentProps keyed by the column id the composer shows. A bare id matches every copy of a repeated collection. A path of enclosing collection columns targets one embedding. r-button reads onClick. The renderer never inspects the bag. In development, a key that addresses no column prints once.

The public Angular sample lab is a teaching project: clone it to see the provider wiring, not to fork a production app.

Need the product docs for tokens, widgets, or the headless API? Start at Getting started, then environments and tokens and the API reference.