Skip to main content

​
Scully Angular Library

The @scullyio/ng-lib package provides Angular-specific integration features that enable you to utilize the full potential of Scully’s static site generation capabilities.

​
Installation

When you install Scully using the ng add schematics, the Angular library is automatically installed: 
ng add @scullyio/init
Or install it manually: 
npm install @scullyio/ng-lib

​
Module Setup

Import the ScullyLibModule in your AppModule: 
import { ScullyLibModule } from '@scullyio/ng-lib';

@NgModule({
  imports: [
    // ... other imports
    ScullyLibModule.forRoot()
  ]
})
export class AppModule { }

​
Configuration

The forRoot() method accepts a configuration object with the following options: 
interface ScullyLibConfig {
  useTransferState?: boolean;     // Default: true
  alwaysMonitor?: boolean;        // Default: false
  manualIdle?: boolean;           // Default: false
  baseURIForScullyContent?: string; // Default: 'http://localhost:1668'
}

​
Configuration Options

​
useTransferState
boolean
default:"true"
Enables the TransferState service to cache and transfer application state into the static site.
​
alwaysMonitor
boolean
default:"false"
When true, the IdleMonitor service will always monitor the application, not just during Scully rendering.
​
manualIdle
boolean
default:"false"
Disables automatic idle detection and requires manual triggering of the ready event.
​
baseURIForScullyContent
string
default:"http://localhost:1668"
The base URI for loading Scully content during development.

​
Example Configuration

import { ScullyLibModule } from '@scullyio/ng-lib';

@NgModule({
  imports: [
    ScullyLibModule.forRoot({
      useTransferState: true,
      alwaysMonitor: false,
      manualIdle: false
    })
  ]
})
export class AppModule { }

​
Core Services

The library provides the following core services:

​
TransferStateService

Transfers application state from the server-rendered page to the client application, avoiding unnecessary API calls. Learn more about TransferStateService →

​
IdleMonitorService

Monitors Angular’s Zone.js to detect when the application becomes idle, signaling to Scully when it’s safe to render the page. Learn more about IdleMonitorService →

​
ScullyRoutesService

Provides access to all routes generated by Scully through observables and methods. Learn more about ScullyRoutesService →

​
Public API

The library exports the following members: 
// Services
export { IdleMonitorService } from './lib/idleMonitor/idle-monitor.service';
export { ScullyRoutesService, ScullyRoute } from './lib/route-service/scully-routes.service';
export { TransferStateService } from './lib/transfer-state/transfer-state.service';

// Components & Modules
export { ScullyContentComponent } from './lib/scully-content/scully-content.component';
export { ScullyContentModule } from './lib/scully-content/scully-content.module';
export { ScullyLibModule } from './lib/scully-lib.module';

// Utilities
export { isScullyGenerated, isScullyRunning } from './lib/utils/isScully';
export { dropEndingSlash } from './lib/idleMonitor/idle-monitor.service';

​
Source Code

View the source code on GitHub:

​
Next Steps

Transfer State

Learn how to cache and transfer application state

Idle Monitor

Understand how Scully detects when to render

Route Service

Access generated routes in your application

Build docs developers (and LLMs) love

Get started for freeTalk to us