División de código y múltiples puntos de entrada

A partir de la versión 21.0.0, Ignite UI for Angular soporta múltiples puntos de entrada, permitiendo un mejor movimiento de árboles, división de código y carga perezosa de componentes. Esta mejora arquitectónica te permite importar solo los componentes y utilidades que necesitas, reduciendo significativamente el tamaño del paquete de tu aplicación.

Descripción general

Anteriormente, todos los componentes de Ignite UI for Angular se exportaban desde un único punto de entrada (igniteui-angular). Aunque conveniente, este enfoque agrupaba todos los componentes, dificultando que las herramientas de compilación eliminaran eficazmente el código no utilizado.

Con la nueva arquitectura de múltiples puntos de entrada, cada componente o grupo de componentes relacionados tiene su propio punto de entrada dedicado. Esto permite a los empaquetadores modernos:

Habilitar la división de código: cada componente puede cargarse de forma perezosa por separado bajo demanda
Reducir el tamaño inicial del paquete: importar solo lo que tu aplicación realmente necesita en la carga inicial
Mejorar el rendimiento de las compilaciones: los grafos de dependencias más pequeños conducen a compilaciones más rápidas

Benefits

✅ División de código: cada componente es cargable de forma perezosa
✅ Paquetes iniciales más pequeños: importa solo lo que necesites
✅ Mejor rendimiento: reducir el tamaño de los paquetes individuales significa tiempos de carga más rápidos
✅ Arquitectura limpia: sin dependencias circulares
✅ Compatibilidad total hacia atrás- El punto de entrada principal sigue funcionando
✅ Importaciones granulares de cuadrícula: carga solo el tipo específico de cuadrícula que necesitas

Entry Points Structure

Core Entry Points

igniteui-angular/core- Utilidades, servicios y tipos base principales (por ejemplo,IgxOverlayService)
igniteui-angular/directives- Directivas comunes

Component Entry Points

Cada componente tiene su propio punto de entrada siguiendo el patrónigniteui-angular/<component-name>:

igniteui-angular/accordion
igniteui-angular/action-strip
igniteui-angular/avatar
igniteui-angular/badge
igniteui-angular/banner
igniteui-angular/bottom-nav
igniteui-angular/button
igniteui-angular/button-group
igniteui-angular/calendar
igniteui-angular/card
igniteui-angular/carousel
igniteui-angular/chat
igniteui-angular/checkbox
igniteui-angular/chips
igniteui-angular/combo
igniteui-angular/date-picker
igniteui-angular/date-range-picker
igniteui-angular/dialog
igniteui-angular/drop-down
igniteui-angular/expansion-panel
igniteui-angular/icon
igniteui-angular/input-group
igniteui-angular/list
igniteui-angular/navbar
igniteui-angular/navigation-drawer
igniteui-angular/paginator
igniteui-angular/progressbar
igniteui-angular/query-builder
igniteui-angular/radio
igniteui-angular/select
igniteui-angular/simple-combo
igniteui-angular/slider
igniteui-angular/snackbar
igniteui-angular/splitter
igniteui-angular/stepper
igniteui-angular/switch
igniteui-angular/tabs
igniteui-angular/time-picker
igniteui-angular/toast
igniteui-angular/tree

Grid Entry Points

Los componentes de la cuadrícula se dividen en puntos de entrada granulares para una división óptima del código:

igniteui-angular/grids/core- Infraestructura de red compartida (columnas, barra de herramientas, filtrado, ordenación, tuberías y servicios públicos)
igniteui-angular/grids/grid- Componente de Red de Datos (IgxGridComponent)
igniteui-angular/grids/tree-grid- Componente de la Rejilla de Árbol (IgxTreeGridComponent)
igniteui-angular/grids/hierarchical-grid- Componente de la Rejilla Jerárquica (IgxHierarchicalGridComponent,IgxRowIslandComponent)
igniteui-angular/grids/pivot-grid - Pivot Grid component (IgxPivotGridComponent, IgxPivotDataSelectorComponent)

Migration

Automatic Migration

El enfoque recomendado es migrar tus importaciones automáticamente durante elng update proceso. Al actualizar a la versión 21.0.0, se te pedirá migrar las importaciones:

ng update igniteui-angular

Cuando se le pida, elige "Sí" para migrar las importaciones a nuevos puntos de entrada y así obtener tamaños óptimos de paquete.

Alternativamente, puedes ejecutar la migración por separado:

ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0

Manual Migration

Si prefieres migrar manualmente o necesitas actualizar importaciones específicas, sigue este patrón:

Antes (v20.x y anteriores)

import { 
  IgxGridComponent,
  IgxTreeGridComponent,
  IgxInputDirective,
  IgxBottomNavComponent,
  Direction, 
  GridBaseAPIService,
  IgxOverlayService,
  IFilteringExpression
} from 'igniteui-angular';

After (v21.0.0)

import { IgxOverlayService } from 'igniteui-angular/core';
import { IFilteringExpression, GridBaseAPIService } from 'igniteui-angular/grids/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';
import { IgxInputDirective } from 'igniteui-angular/input-group';
import { IgxBottomNavComponent } from 'igniteui-angular/bottom-nav';
import { CarouselAnimationDirection } from 'igniteui-angular/carousel';

Type Renames

Para evitar conflictos de nombres con la nueva arquitectura, algunos tipos han sido renombrados:

Direction→CarouselAnimationDirection (en el punto de entrada del carrusel)

// Before
import { Direction } from 'igniteui-angular';

// After
import { CarouselAnimationDirection } from 'igniteui-angular/carousel';

Backwards Compatibility

El punto de entrada principal (igniteui-angular) mantiene la compatibilidad total hacia atrás al reexportar todos los puntos de entrada granulares. Puedes seguir usando las importaciones desde el punto de entrada principal sin ningún cambio:

// This still works and will continue to work
import { IgxGridComponent, IgxButtonDirective } from 'igniteui-angular';

Sin embargo, recomendamos encarecidamente migrar a los nuevos puntos de entrada para aprovechar una mejor agitación de árboles y tamaños de paquetes más pequeños.

Usage Examples

Example 1: Simple Component Usage

Si solo necesitas un botón y una entrada, importa solo esos puntos de entrada:

import { Component } from '@angular/core';
import { IgxButtonDirective } from 'igniteui-angular/button';
import { 
  IgxInputGroupComponent, 
  IgxInputDirective, 
  IgxLabelDirective 
} from 'igniteui-angular/input-group';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [
    IgxButtonDirective,
    IgxInputGroupComponent,
    IgxInputDirective,
    IgxLabelDirective
  ],
  template: `
    <igx-input-group>
      <label igxLabel>Name</label>
      <input igxInput type="text" />
    </igx-input-group>
    <button igxButton="contained">Submit</button>
  `
})
export class FormComponent {}

Example 2: Grid with Specific Features

Importa solo el tipo de red que necesites junto con las utilidades de red central:

import { Component } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';

@Component({
  selector: 'app-data-grid',
  standalone: true,
  imports: [IgxGridComponent, IgxGridToolbarComponent],
  template: `
    <igx-grid [data]="data" [autoGenerate]="true">
      <igx-grid-toolbar></igx-grid-toolbar>
    </igx-grid>
  `
})
export class DataGridComponent {
  public data = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
  ];
}

Example 3: Lazy Loading Components

Con los nuevos puntos de entrada, puedes cargar fácilmente componentes de forma perezosa:

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'grid',
    loadComponent: () => 
      import('./features/grid/grid.component')
        .then(m => m.GridComponent)
  },
  {
    path: 'tree-grid',
    loadComponent: () => 
      import('./features/tree-grid/tree-grid.component')
        .then(m => m.TreeGridComponent)
  }
];

// features/grid/grid.component.ts
import { Component } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';

@Component({
  selector: 'app-grid',
  standalone: true,
  imports: [IgxGridComponent],
  template: `<igx-grid [data]="data" [autoGenerate]="true"></igx-grid>`
})
export class GridComponent {
  public data = [];
}

Migration Options Summary

Tienes tres opciones al actualizar a la versión 21.0.0:

Option 1: Migrate During Update (Recommended)

ng update igniteui-angular

Cuando te lo pidan, elige "Sí" para migrar importaciones.

Option 2: Keep Using Main Entry Point

ng update igniteui-angular

Cuando se le pida, elige "No" para continuar usando el punto de entrada principal. La biblioteca sigue siendo totalmente retrocompatible, pero no te beneficiarás de tamaños óptimos de paquetes.

Option 3: Migrate Later

Actualizar sin migrar (elige "No" cuando te lo pidan):

ng update igniteui-angular

Migrar manualmente más adelante:

ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0

Best Practices

Usa puntos de entrada específicos: Importa desde el punto de entrada más específico posible (por ejemplo,igniteui-angular/grids/grid en lugar de)igniteui-angular
Aprovecha la carga perezosa: combina los puntos de entrada con la carga perezosa de Angular para un rendimiento aún mejor
Importa solo lo que necesites: No importes todocore el punto de entrada si solo necesitas un servicio
Check bundle analyzer - Use tools like webpack-bundle-analyzer to verify your bundle size improvements
Actualiza regularmente: mantén actualizada tu versión de Ignite UI for Angular para aprovechar las últimas optimizaciones

Additional Resources

API References

Para información detallada sobre componentes específicos y sus APIs, consulte la documentación de componentes: