Getting Started with Ignite UI CLI

    If you are creating a new Angular application from scratch, we recommend using the approach described bellow as it will provide you with an user-friendly guided experience. The guide will lead you through all the setup options and your project will be scaffolded in a blink of an eye.

    To get started install Ignite UI CLI globally:

    npm install -g igniteui-cli

    If you are using yarn package manager:

    yarn global add igniteui-cli

    Using guided experience

    The shortest and easiest way to bootstrap an application is to use the step by step guide using Ignite UI CLI.

    To activate the guide using the Ignite UI CLI run:

    ig

    or

    ig new

    Building Your First Ignite UI CLI App

    Create a new project

    When using Ignite UI CLI you need to provide angular as framework and igx-ts as your project type argument to the new command:

    ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav
    Note

    As of v13.1.0, the igx-ts project type will generate a project that uses standalone components by default. If you prefer to use the module-based bootstrapping instead you can set the type to be igx-ts-legacy.

    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:

    name

    name (alias: -n)

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

    framework (Ignite UI CLI only)

    --framework (alias: -f) default value: "jquery"

    Framework to setup project for. The supported frameworks are jQuery, Angular and React.

    type (Ignite UI CLI only)

    --type (alias: -t)

    The available project types depend on the selected framework.

    theme

    --theme (alias: -th)

    Project theme (depends on project type).

    skip-git

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

    When this option is used, the automatic repository initialization with Git will be skipped. If the option is omitted, then the global skip-git configuration property is used.

    skip-install

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

    The new command will install package dependencies on project creation. Passing this flag will skip the initial installation.

    template

    --template

    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.

    Add template

    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. Their usage is supported only inside existing projects created with the Ignite UI CLI, Angular Schematics or where Ignite UI for Angular has been installed using ng add.

    We use the ig add [template] [name] command:

    ig add grid newGrid

    To get a list of all the available templates you can also execute the ig list command in your project directory.

    Additionally, you can specify the module in which the component will be registered or skip the auto-generation of app navigation route:

    module

    --module (alias: -m)

    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:

    ig add combo newCombo --module=myModule/myModule.module.ts
    skip-route

    --skip-route (alias: -srk)

    Don't auto-generate an app navigation route for the new component

    Run the application

    The start command will build the application, start a web server and open it in your default browser:

    ig start

    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:

    Command Alias Description
    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