Introducción a Ignite UI for Angular esquemas

La colección Ignite UI for Angular Schematics es un conjunto de esquemas de Angular CLI para andamiaje Angular proyectos y vistas de componentes preconfiguradas para Ignite UI for Angular. Se integra en el flujo de trabajo nativo Angular CLI: úsalo parang new la creación de proyectos yng g para andamiaje de componentes, sin instalar una herramienta global separada. La colección se distribuye como paquete@igniteui/angular-schematics y se añade automáticamente cuando ejecutasng add igniteui-angular en un proyecto Angular existente.

La colección de Esquemas no ejecuta un servidor MCP: el proceso del servidor MCP es proporcionado por la CLI de Ignite UI y comienza a travésnpx -y igniteui-cli mcp de, donde-y evita la confirmación interactivanpx. Elai-config esquema configura la conexión del cliente MCP y copia Agent Skills sin requerir una instalación de CLI separada. La colección es específica de Angular; React, Web Components y Blazor equivalentes se cubren en la documentación de sus respectivos marcos. Ninguna de las dos herramientas es necesaria para usar Ignite UI for Angular- la biblioteca puede instalarse y configurarse manualmente como se describe en la guía de Inicio.

Install the Schematics Collection

Instala@igniteui/angular-schematics globalmente usando npm:

npm i -g @igniteui/angular-schematics

O, usando hilo:

yarn global add @igniteui/angular-schematics

Tras una instalación global, la colección está disponible como--collection argumento parang new. Si ya tienes un proyecto Angular y quieres añadir Ignite UI for Angular sin andamiar uno nuevo, usa:

ng add igniteui-angular

Esto instala eligniteui-angular paquete, registra la@igniteui/angular-schematics colección y configura dependencias, estilos e importaciones de temas automáticamente.

Create a New Project

La colección Esquemáticas ofrece dos modos para la creación de proyectos: un asistente interactivo guiado y un comando directong new con argumentos explícitos.

Use the guided wizard

El asistente guiado es el punto de partida recomendado para nuevos proyectos. Actívalo con:

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

Para una guía paso a paso de las opciones del asistente, consulta Guía paso a paso usando Ignite UI for Angular esquemas.

Create a project directly

Para crear un proyecto Angular de forma no interactiva, proporciona la colección y los argumentos de la plantilla parang new:

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

Por defecto, el proyecto utiliza componentes independientes. Para usar el arranque basado en NgModule, añade--type=igx-ts-legacy:

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

El proyecto se crea en un directorio que lleva el nombre del proyecto. Las siguientes plantillas de proyectos están disponibles:

ID de plantilla	Descripción
vacío	Estructura del proyecto con enrutamiento y una página de inicio
navegación lateral	Estructura del proyecto con un cajón de navegación lateral
lado-nav-autorización	Proyecto de navegación lateral ampliado con un módulo de autenticación de usuarios. Consulta Angular Plantilla de Proyecto de Autenticación para más detalles.

Los siguientes argumentos están disponibles al crear un proyecto:

nombre

name(alias:-n)

El nombre de la aplicación. La aplicación se crea dentro de un directorio con el mismo nombre.

Tipo

--type(alias:-t)

El tipo de proyecto que financia el proyecto. Úsalaigx-ts-legacy para el bootstrap basado en NgModule. Omite los componentes independientes por defecto.

tema

--theme(alias:-th)

Tema del proyecto (depende del tipo de proyecto).

saltar-git

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

Omite la inicialización automática del repositorio Git. Si se omite, se utiliza la propiedad de configuración globalskip-git.

saltar-instalar

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

Evita la instalación inicial del paquete npm en la creación del proyecto.

plantilla

--template

Especifica la plantilla del proyecto. Actualmente disponible para Ignite UI for Angularigx-ts tipos de proyectos.

Add a Component Template

Para añadir una plantilla de Ignite UI for Angular disponible a un proyecto existente, úsalong generate junto con la colección de Ignite UI for Angular y elcomponent esquema, proporcionando el ID de la plantilla y un nombre para el nuevo componente:

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

La adición de plantillas se soporta en proyectos creados con los esquemas de Angular, Ignite UI CLI o cualquier proyecto de Angular CLI donde se haya añadidong add Ignite UI for Angular. Para el asistente de componentes guiados, consulte Guía paso a paso usando esquemas de Ignite UI for Angular.

Los siguientes argumentos están disponibles al añadir una plantilla:

módulo

--module(alias:-m)

Solo aplicable en Angular proyectos.

Ruta hacia elmodule.ts archivo, relativa a/src/app/, donde debe registrarse el nuevo componente:

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

saltear ruta

--skip-route(alias:-srk)

Se salta la generación automática de una ruta de navegación de la app para el nuevo componente.

Run the Application

Elstart esquema construye la aplicación, inicia un servidor web local y lo abre en tu navegador predeterminado:

ng g @igniteui/angular-schematics:start

AI Assistant Integration

La colección Ignite UI for Angular Schematics incluye unai-config esquema que configura Ignite UI for Angular Agent Skills y los Ignite UI servidores MCP para tu proyecto en un solo paso. Ejecuta desde la raíz de tu proyecto después de instalar Ignite UI for Angular paquetes:

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

Esto copia Ignite UI for Angular Habilidades de Agente y.claude/skills/ escribe tres entradas del servidor MCP en.vscode/mcp.json:@angular/cli,igniteui mcp, yigniteui-theming-mcp. Si los archivos ya existen y están actualizados, el comando es un no-op.

Si tienes la CLI Ignite UI instalada globalmente, el comando equivalente es:

ig ai-config

Note

Elig ai-config comando configura solo las dos entradas Ignite UI,igniteui mcp yigniteui-theming-mcp no se registra@angular/cli. Úsalong generate @igniteui/angular-schematics:ai-config para configurar los tres servidores en un solo paso.

Para instrucciones completas de configuración en todos los clientes de IA y cableado de Agent Skills, consulta Ignite UI CLI MCP.