Angular Schematics & Ignite UI CLI
Our CLI tools provide project templates pre-configured for Ignite UI for Angular that help you get your next app off the ground in record time. A selection of views with Ignite UI for Angular components that can be further added to projects provide a substantial productivity boost for developers.
Ignite UI CLI is a stand-alone command-line tool for creating and scaffolding applications for a variety of frameworks.
Ignite UI for Angular Schematics are part of the same project, available as a collection that can be used with the Angular CLI. They offer similar core Ignite UI CLI functionality, but one that's integrated with the Schematics workflow and focused specifically on this product. The schematics collection is added to your project when you install Ignite UI for Angular.
Both versions of the tooling allow for generating different projects, component and scenario views (templates) and offer guided mode.
Install Ignite UI for Angular Schematics globally:
npm i -g @igniteui/angular-schematics
The above install will make the schematics available to use a collection parameter for the
ng new command.
If you choose to use the Ignite UI CLI you can install it using npm:
npm install -g igniteui-cli
Using guided experience
The shortest and easiest way to bootstrap an application is to use the Step-by-Step Guide.
To activate the guide using the Ignite UI for Angular Schematics run:
ng new --collection="@igniteui/angular-schematics"
or run the following command in case you are using Ignite UI CLI:
Create new project
To create an application that is configured to use the Ignite UI for Angular controls, run the
ng new command providing
@igniteui/angular-schematics to the collection option.
ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav
If you use Ignite UI CLI you need to provide
angular as framework and
igx-ts as your project type argument to the
ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav
The new application is created in a directory with the same name (
newAngularProject). There are several project templates from which you can choose when creating an Ignite UI for Angular application:
|template id||template description|
|empty||Project structure with routing and a home page|
|side-nav||Project structure with side navigation drawer|
|side-nav-auth||Side navigation project extended with user authentication module.
Angular Authentication Project Template topic covers the project template in detail.
Additionally, you can specify arguments to control the theme or skip packages install:
The name of the application. The application is created inside a directory with the same name.
framework (Ignite UI CLI only)
-f) default value: "jquery"
Framework to setup project for. The supported frameworks are jQuery, Angular and React.
type (Ignite UI CLI only)
The available project types depend on the selected framework.
Project theme (depends on project type).
When this option is used, the automatic repository initialization with Git will be skipped. If the option is omitted, then the global skipGit configuration property is used.
new command will install package dependencies on project creation. Passing this flag will skip the initial installation.
Use this option if there are different project templates for a specific framework type. Currently this option is available only for Ignite UI for Angular igx-ts project types.
To add one of the available Ignite UI Angular templates you need to provide template ID and a name for the new component or use the Step-by-Step Guide. Supported only inside existing projects created with the Angular Schematics, Ignite UI CLI or where Ignite UI for Angular has been installed using
With Schematics, use
ng generate with the Ignite UI for Angular collection and
component [template] [name]:
ng g @igniteui/angular-schematics:component grid newGrid
For Ignite UI CLI use the
ig add [template] [name] command:
ig add grid newGrid
Additionally, you can specify the module in which the component will be registered or skip the auto-generation of app navigation route:
note: module argument is applicable only in Angular projects.
Path to the module.ts file, relative to the /src/app/ folder, for the module where the new component should be registered:
ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts
ig add combo newCombo --module=myModule/myModule.module.ts
Don't auto-generate an app navigation route for the new component
Run the application
start schematic or command will build the application, start a web server and open it in your default browser.
using Ignite UI for Angular Schematics:
ng g @igniteui/angular-schematics:start
using Ignite UI CLI:
Ignite UI CLI Commands
A full list of the available Ignite UI CLI commands and their usage (like passing flags, etc.), can be found at the Ignite UI CLI wiki pages:
|ig start||Builds the application, starts a web server and opens the application in the default browser.|
|ig build||Builds the application into an output directory|
|ig generate||g||Generates a new custom template for supported frameworks and project types|
|ig help||-h||Lists the available commands and provides a brief description of what they do.|
|ig config||Performs read and write operation on the Ignite UI CLI configuration settings.|
|ig doc||Searches the Infragistics knowledge base for information about a given search term|
|ig list||l||Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones.|
|ig test||Executes the tests for the current project.|
|ig version||-v||Shows Ignite UI CLI version installed locally, or globally if local is missing|