Angular Schematics Documentation

This collection provides powerful Angular schematics to streamline development workflows. Each schematic is designed to automate common tasks, improve maintainability, and promote best practices.

Installation

To add this schematic collection to your project, use the following command:

ng add @pbuilder/angular

Schematics Overview

1. ng-add

• Description: Automatically executed when you add this schematic collection using ng add.
• Functionality:
  • Sets up the required configurations for this schematic collection.
  • Ensures that dependencies are installed and the workspace is ready for other schematics.
  • You have the option to skip the ngrx/signal config. ng add @pbuilder/angular --skip-ngrx.
  • If your app is not a standalone app and you don't have the file app.config.ts in your src folder, the schematic will not update it.

Usage:

ng add @pbuilder/angular

2. jasmine-to-jest

• Description: Migrates Angular workspaces from Jasmine to Jest.
• Functionality:
  • Updates testing configurations to use Jest.
  • Modifies test files and adjusts necessary settings for compatibility with Jest.

Options

If you want to see all the options, you can run the command builder info @pbuilder/angular. You can see the options of any schematic by running builder info [collection-name]:[schematic-name].

For this schematics the options are:

• packageManager: The package manager used to install dependencies.

Usage:

ng generate jasmine-to-jest

Outcome:

• Jasmine settings will be replaced with Jest configurations.
• Testing scripts in your package.json will reflect the change to Jest.

I am creating this automation base on this medium article

3. Resource

• Description: Creates a complete resource based on @ngrx/signals.
• Functionality:
  • Generates an @ngrx-powered state management resource, including actions, effects, reducers, and selectors.
  • Provides a boilerplate for working with signals in your Angular application.

Usage:

ng generate resource [resource-name]

Example:

ng generate resource users

└── 📁users
    └── 📁adapters
        └── index.ts
        └── users.adapter.ts
    └── 📁components
        └── 📁user
            └── user.component.html
            └── user.component.scss
            └── user.component.spec.ts
            └── user.component.ts
        └── 📁user-edit
            └── user-edit.component.html
            └── user-edit.component.scss
            └── user-edit.component.spec.ts
            └── user-edit.component.ts
        └── 📁user-update
            └── user-update.component.html
            └── user-update.component.scss
            └── user-update.component.spec.ts
            └── user-update.component.ts
    └── 📁models
        └── index.ts
        └── users.model.ts
    └── 📁services
        └── users.service.spec.ts
        └── users.service.ts
    └── 📁stores
        └── index.ts
        └── users.store.ts
    └── users.component.html
    └── users.component.scss
    └── users.component.spec.ts
    └── users.component.ts

Outcome:

• Files for managing the user resource will be created, following @ngrx best practices.

Note

This schematics is using the native ng generate component and ng generate service commands, for this reason we are reading the preferences from the angular.json file. If you want to modify something, you can do it in the angular.json file.

4. Scaffolding

• Description: Generates a specific architecture for your Angular application.
• Functionality:
  • Allows you to scaffold predefined architectural patterns or custom layouts.
  • Provides templates for components, services, modules, and more.

Usage:

ng generate scaffolding

Outcome:

• A directory structure and files for the selected architecture type will be created.

This will create these directories and files:

    └── 📁adapters
        └── index.ts
    └── 📁components
        └── index.ts
    └── 📁models
        └── index.ts
    └── 📁pipes
        └── index.ts
    └── 📁services
        └── index.ts
    └── 📁stores
        └── index.ts

Also, this schematics will add the following to the tsconfig.json file:

{
  "paths": {
    "@adapters": [
      "./src/app/adapters/index.ts"
    ],
    "@components": [
      "./src/app/components/index.ts"
    ],
    "@models": [
      "./src/app/models/index.ts"
    ],
    "@pipes": [
      "./src/app/pipes/index.ts"
    ],
    "@services": [
      "./src/app/services/index.ts"
    ],
    "@stores": [
      "./src/app/stores/index.ts"
    ]
  }
}

Notes

• For each schematic, use ng generate [schematic-name] followed by the required options to execute.
• All schematics include a schema file for customizable options. Use --help with any command for details.

This collection is designed to improve productivity and maintainability. Explore each schematic and see how they can elevate your Angular projects!