Skip to main content

​
ng-add

The ng-add schematic installs and configures Scully in an Angular application. This is the primary schematic to get started with Scully.

​
Usage

​
Basic Installation

ng add @scullyio/init

​
With Options

ng add @scullyio/init --project=my-app --blog --renderer=puppeteer

​
Options

​
--blog

  • Type: boolean
  • Default: false
  • Description: Automatically adds a complete blog setup to your application
When enabled, this option runs the blog schematic after installation to create a full blog structure with routing, components, and a sample markdown file. 
ng add @scullyio/init --blog

​
--project

  • Type: string
  • Default: "defaultProject"
  • Description: Specifies which project in a multi-project workspace to add Scully to
Use this option in Angular CLI workspaces with multiple projects: 
ng add @scullyio/init --project=my-app
For NX workspaces: 
ng add @scullyio/init --project=my-app

​
--pluginTS

  • Type: boolean
  • Default: true
  • Description: Enables support for custom TypeScript plugins
This option configures your project to support writing Scully plugins in TypeScript. 
ng add @scullyio/init --pluginTS=false

​
--local

  • Type: boolean
  • Default: false
  • Description: Installs Scully from local dependencies instead of npm
Useful for development or testing unreleased versions: 
ng add @scullyio/init --local

​
--renderer

  • Type: string
  • Default: "sps"
  • Options: "sps", "puppeteer", "playwright"
  • Description: Selects the route renderer to use for pre-rendering
The renderer is responsible for executing your Angular application and capturing the rendered HTML. Available renderers:
  • sps (Scully Platform Server) - Default option, uses Angular’s platform-server
  • puppeteer - Uses Puppeteer for headless Chrome rendering
  • playwright - Uses Playwright for cross-browser rendering (beta)
ng add @scullyio/init --renderer=puppeteer
You’ll be prompted to select a renderer if not specified: 
? Which route renderer would you like to use?
  ❯ Scully platform server
    Puppeteer
    Playwright (beta)

​
What Gets Created/Modified

The ng-add schematic performs the following actions:

​
1. Package Dependencies

Adds the following packages to package.json:
  • @scullyio/scully - Core Scully library
  • @scullyio/ng-lib - Angular components for Scully
  • Renderer-specific package based on your selection:
    • @scullyio/scully-plugin-puppeteer (if using Puppeteer)
    • @scullyio/scully-plugin-playwright (if using Playwright)
    • @angular/platform-server and @scullyio/platform-server (if using SPS)

​
2. App Module Updates

File: src/app/app.module.ts Adds ScullyLibModule import: 
import { ScullyLibModule } from '@scullyio/ng-lib';

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

​
3. Polyfills Configuration

File: src/polyfills.ts Adds zone.js task tracking: 
/***************************************************************************************************
 * SCULLY IMPORTS
 */
import 'zone.js/dist/task-tracking';

​
4. Git Ignore Entries

File: .gitignore Adds Scully-specific entries: 
scully.log
scullyStats.json
.scully
/scully/**/*.js
/scully/**/*.js.map
/scully/**/*.d.ts

​
5. Scully Configuration

Creates a Scully configuration file (done by the subsequent scully schematic that runs automatically).

​
6. Blog Setup (Optional)

If --blog flag is used, also creates:
  • Blog module and component
  • Blog routing configuration
  • Sample markdown file
  • Content folder configuration in Scully config
See the blog schematic for details.

​
Angular Version Requirements

Scully requires Angular version 12 or higher. The schematic will check your Angular version and exit with an error if you’re using an older version.

​
Examples

​
Standard Installation

ng add @scullyio/init
This installs Scully with default settings (SPS renderer, no blog, TypeScript plugin support enabled).

​
Complete Blog Setup

ng add @scullyio/init --blog
Installs Scully and creates a complete blog with routing and components.

​
Multi-Project Workspace

ng add @scullyio/init --project=my-app --renderer=puppeteer
Installs Scully in a specific project using Puppeteer renderer.

​
NX Workspace

For Angular CLI in NX workspace: 
ng add @scullyio/init --project=my-app
For vanilla NX projects: 
npm install @scullyio/init
nx g @scullyio/init:install --project=my-app

​
Next Steps

After running ng-add, you can:
  1. Build your Angular application: 
    ng build
  2. Run Scully to generate static pages: 
    npm run scully
  3. Serve the static site: 
    npm run scully:serve

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us