@duffcloudservices/cms-angular

Angular services and build scripts for DCS CMS integration.

Installation

pnpm add @duffcloudservices/cms-angular

Usage

1. Add Provider

// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideDcs } from '@duffcloudservices/cms-angular'

export const appConfig: ApplicationConfig = {
  providers: [
    provideDcs(),
  ],
}

2. Use in Components

// pages/home.component.ts
import { Component, inject, OnInit } from '@angular/core'
import { DcsContentService, DcsSeoService } from '@duffcloudservices/cms-angular'

@Component({
  selector: 'app-home',
  template: `
    <h1>{{ title }}</h1>
    <p>{{ subtitle }}</p>
  `,
})
export class HomeComponent implements OnInit {
  private content = inject(DcsContentService)
  private seo = inject(DcsSeoService)

  get title() {
    return this.content.t('home', 'hero.title', 'Welcome')
  }

  get subtitle() {
    return this.content.t('home', 'hero.subtitle', 'Build amazing things')
  }

  ngOnInit() {
    this.seo.setPageSeo('home')
  }
}

3. Post-Build Injection

After running ng build, inject the DCS content into index.html:

npx dcs-inject dist/my-app

Or add to your package.json scripts:

{
  "scripts": {
    "build": "ng build && dcs-inject dist/my-app"
  }
}

DCS Configuration Files

Create .dcs/content.yaml:

version: 1
global:
  nav.home: Home
  footer.copyright: © 2026 Company
pages:
  home:
    hero.title: Welcome to Our Site
    hero.subtitle: Build something amazing

Create .dcs/seo.yaml:

version: 1
global:
  siteName: My Site
  defaultTitle: My Site
  titleTemplate: "%s | My Site"
pages:
  home:
    title: Welcome
    description: The homepage of My Site

API

DcsContentService

Service for text content management.

Methods:

• t(page, key, fallback?): Get text by page and key
• getPageContent(page): Get all content for a page
• fetchRuntimeContent(siteSlug, apiBaseUrl?): Fetch runtime content (premium)

Signals:

• content: Current content configuration
• isLoading: Loading state
• error: Error message

DcsSeoService

Service for SEO meta tag management.

Methods:

• setPageSeo(page, overrides?): Apply SEO for a page
• getSeoConfig(): Get raw SEO configuration

CLI: dcs-inject

Inject content into Angular build output.

npx dcs-inject <dist-path> [options]

Options:
  --content-path  Path to content.yaml (default: .dcs/content.yaml)
  --seo-path      Path to seo.yaml (default: .dcs/seo.yaml)
  --index-file    Index file name (default: index.html)

License

MIT