Divisão de Código e Múltiplos Pontos de Entrada

A partir da versão 21.0.0, Ignite UI for Angular suporta múltiplos pontos de entrada, permitindo melhor trete-de-árvore, divisão de código e carregamento preguiçoso de componentes. Essa melhoria arquitetural permite importar apenas os componentes e utilitários necessários, reduzindo significativamente o tamanho do pacote da sua aplicação.

Visão geral

Anteriormente, todos os componentes Ignite UI for Angular eram exportados de um único ponto de entrada (igniteui-angular). Embora conveniente, essa abordagem agrupava todos os componentes, dificultando que as ferramentas de build eliminassem código não utilizado de forma eficaz.

Com a nova arquitetura de múltiplos pontos de entrada, cada componente ou grupo de componentes relacionados tem seu próprio ponto de entrada dedicado. Isso permite que os empacotadores modernos:

Ativar divisão de código- Cada componente pode ser carregado lentamente separadamente sob demanda
Reduza o tamanho inicial do pacote- Importe apenas o que sua aplicação realmente precisa na carga inicial
Melhorar o desempenho das builds- Grafos de dependência menores levam a builds mais rápidas

Benefits

✅ Divisão de Código- Cada componente é carregável de forma preguiçosa
✅ Pacotes iniciais menores- Importe apenas o que você precisa
✅ Melhor desempenho- Tamanhos individuais reduzidos significam tempos de carregamento mais rápidos
✅ Arquitetura Limpa- Sem dependências circulares
✅ Compatibilidade Retroativa Total- O ponto de entrada principal ainda funciona
✅ Importação de Grade Granular- Carregue apenas o tipo específico de grade que você precisa

Entry Points Structure

Core Entry Points

igniteui-angular/core- Utilidades, serviços e tipos de base centrais (por exemplo,)IgxOverlayService
igniteui-angular/directives- Diretrizes comuns

Component Entry Points

Cada componente tem seu próprio ponto de entrada seguindo o padrãoigniteui-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

Os componentes da grade são divididos em pontos de entrada granulares para a divisão ótima do código:

igniteui-angular/grids/core- Infraestrutura de grade compartilhada (colunas, barra de ferramentas, filtragem, ordenação, pipelines e utilidades)
igniteui-angular/grids/grid- Componente de Grade de Dados (IgxGridComponent)
igniteui-angular/grids/tree-grid- Componente de Grade de Árvore (IgxTreeGridComponent)
igniteui-angular/grids/hierarchical-grid- Componente de Grade Hierárquica (IgxHierarchicalGridComponent,IgxRowIslandComponent)
igniteui-angular/grids/pivot-grid - Pivot Grid component (IgxPivotGridComponent, IgxPivotDataSelectorComponent)

Migration

Automatic Migration

A abordagem recomendada é migrar suas importações automaticamente durante ong update processo. Ao atualizar para a versão 21.0.0, será solicitado que você migre as importações:

ng update igniteui-angular

Quando solicitado, escolha "Sim" para migrar importações para novos pontos de entrada para tamanhos ideais de pacotes.

Alternativamente, você pode rodar a migração separadamente:

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

Manual Migration

Se preferir migrar manualmente ou precisar atualizar importações específicas, siga este padrão:

Antes (v20.x e 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 conflitos de nomes com a nova arquitetura, alguns tipos foram renomeados:

Direction→CarouselAnimationDirection (no ponto de entrada do carrossel)

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

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

Backwards Compatibility

O ponto de entrada principal (igniteui-angular) mantém total compatibilidade retroativa ao reexportar todos os pontos de entrada granulares. Você pode continuar usando as importações do ponto de entrada principal sem nenhuma alteração:

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

No entanto, recomendamos fortemente migrar para os novos pontos de entrada para aproveitar melhor o sacudir das árvores e tamanhos de feixes menores.

Usage Examples

Example 1: Simple Component Usage

Se você só precisa de um botão e uma entrada, importe apenas esses pontos 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

Importe apenas o tipo de rede que você precisa junto com as utilidades da rede principal:

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

Com os novos pontos de entrada, você pode facilmente carregar componentes de forma preguiçosa:

// 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

Você tem três opções ao atualizar para a v21.0.0:

Option 1: Migrate During Update (Recommended)

ng update igniteui-angular

Quando solicitado, escolha "Sim" para migrar importações.

Option 2: Keep Using Main Entry Point

ng update igniteui-angular

Quando solicitado, escolha "Não" para continuar usando o ponto de entrada principal. A biblioteca continua totalmente compatível com versões anteriores, mas você não se beneficiará de tamanhos ideais para pacotes.

Option 3: Migrate Later

Atualize sem migrar (escolha "Não" quando solicitado):

ng update igniteui-angular

Migre manualmente depois:

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

Best Practices

Use pontos de entrada específicos- Importe do ponto de entrada mais específico possível (por exemplo,igniteui-angular/grids/grid em vez de)igniteui-angular
Aproveite o carregamento preguiçoso- Combine os pontos de entrada com o carregamento preguiçoso do Angular para um desempenho ainda melhor
Importe apenas o que você precisa- Não importe todocore o ponto de entrada se precisar de apenas um serviço
Check bundle analyzer - Use tools like webpack-bundle-analyzer to verify your bundle size improvements
Atualize regularmente- Mantenha sua versão Ignite UI for Angular atualizada para aproveitar as otimizações mais recentes

Additional Resources

API References

Para informações detalhadas sobre componentes específicos e suas APIs, consulte a documentação de componentes: