Getting Started with Ignite UI for Angular Schematics

The Ignite UI for Angular Schematics collection is a set of Angular CLI schematics for scaffolding Angular projects and component views pre-configured for Ignite UI for Angular. It integrates into the native Angular CLI workflow - use it with ng new for project creation and ng g for component scaffolding, without installing a separate global tool. The collection is distributed as the @igniteui/angular-schematics package and is added automatically when you run ng add igniteui-angular on an existing Angular project.

The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via npx -y igniteui-cli mcp, where -y avoids the interactive npx confirmation prompt. The ai-config schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the Getting Started guide.

Install the Schematics Collection

Install @igniteui/angular-schematics globally using npm:

npm i -g @igniteui/angular-schematics

Or, using yarn:

yarn global add @igniteui/angular-schematics

After a global install, the collection is available as the --collection argument to ng new. If you already have an Angular project and want to add Ignite UI for Angular without scaffolding a new one, use:

ng add igniteui-angular

This installs the igniteui-angular package, registers the @igniteui/angular-schematics collection, and configures dependencies, styles, and theme imports automatically.

Create a New Project

The Schematics collection provides two modes for project creation: a guided interactive wizard and a direct ng new command with explicit arguments.

Use the guided wizard

The guided wizard is the recommended starting point for new projects. Activate it with:

ng new --collection="@igniteui/angular-schematics"

For a step-by-step walkthrough of the wizard options, see Step-by-Step Guide Using Ignite UI for Angular Schematics.

Create a project directly

To create an Angular project non-interactively, provide the collection and template arguments to ng new:

ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav

By default, the project uses standalone components. To use NgModule-based bootstrapping instead, add --type=igx-ts-legacy:

ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-ts-legacy

The project is created in a directory named after the project. The following project templates are available:

Template ID	Description
empty	Project structure with routing and a home page
side-nav	Project structure with a side navigation drawer
side-nav-auth	Side navigation project extended with a user authentication module. See Angular Authentication Project Template for details.

The following arguments are available when creating a project:

name

name (alias: -n)

The name of the application. The application is created inside a directory with the same name.

type

--type (alias: -t)

The project bootstrapping type. Use igx-ts-legacy for NgModule-based bootstrapping. Omit to default to standalone components.

theme

--theme (alias: -th)

Project theme (depends on project type).

skip-git

--skip-git (alias: --sg)

Skips automatic Git repository initialization. If omitted, the global skip-git configuration property is used.

skip-install

--skip-install (alias: --si)

Skips the initial npm package installation on project creation.

template

--template

Specifies the project template. Currently available for Ignite UI for Angular igx-ts project types.

Add a Component Template

To add an available Ignite UI for Angular template to an existing project, use ng generate with the Ignite UI for Angular collection and the component schematic, providing the template ID and a name for the new component:

ng g @igniteui/angular-schematics:component grid newGrid

Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with ng add. For the guided component wizard, see Step-by-Step Guide Using Ignite UI for Angular Schematics.

The following arguments are available when adding a template:

module

--module (alias: -m)

Applicable only in Angular projects.

Path to the module.ts file, relative to /src/app/, where the new component should be registered:

ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts

skip-route

--skip-route (alias: -srk)

Skips auto-generation of an app navigation route for the new component.

Run the Application

The start schematic builds the application, starts a local web server, and opens it in your default browser:

ng g @igniteui/angular-schematics:start

AI Assistant Integration

The Ignite UI for Angular Schematics collection includes an ai-config schematic that configures Ignite UI for Angular Agent Skills and the Ignite UI MCP servers for your project in a single step. Run it from your project root after installing Ignite UI for Angular packages:

ng generate @igniteui/angular-schematics:ai-config

This copies Ignite UI for Angular Agent Skills into .claude/skills/ and writes three MCP server entries to .vscode/mcp.json: @angular/cli, igniteui mcp, and igniteui-theming-mcp. If the files already exist and are up-to-date, the command is a no-op.

If you have the Ignite UI CLI installed globally, the equivalent command is:

ig ai-config

Note

The ig ai-config command configures only the two Ignite UI entries, igniteui mcp and igniteui-theming-mcp, and does not register @angular/cli. Use ng generate @igniteui/angular-schematics:ai-config to get all three servers configured in a single step.

For full setup instructions across all AI clients and Agent Skills wiring, see Ignite UI CLI MCP.