Skip to content

Commit 5818663

Browse files
gedinakovagedinakova
authored
Merge branch 'vnext' into mtsvyatkova/pdf-exporter
2 parents f377041 + 8c528ed commit 5818663

File tree

3 files changed

+358
-0
lines changed

3 files changed

+358
-0
lines changed

‎en/components/general/code-splitting-and-multiple-entry-points.md‎

Lines changed: 324 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,324 @@
1+
---
2+
title: Code Splitting and Multiple Entry Points | Ignite UI for Angular | Infragistics
3+
_description: Learn how to optimize your Angular application bundle size using Ignite UI for Angular's multiple entry points for better tree-shaking and code splitting.
4+
_keywords: ignite ui for angular, code splitting, entry points, tree-shaking, lazy loading, bundle optimization
5+
---
6+
7+
# Code Splitting and Multiple Entry Points
8+
9+
Starting with version 21.0.0, Ignite UI for Angular supports multiple entry points, enabling better tree-shaking, code splitting, and lazy loading of components. This architectural improvement allows you to import only the components and utilities you need, significantly reducing your application's bundle size.
10+
11+
## Overview
12+
13+
Previously, all Ignite UI for Angular components were exported from a single entry point (`igniteui-angular`). While convenient, this approach bundled all components together, making it difficult for build tools to eliminate unused code effectively.
14+
15+
With the new multiple entry points architecture, each component or group of related components has its own dedicated entry point. This allows modern bundlers to:
16+
17+
- **Enable code splitting** - Each component can be lazy-loaded separately on demand
18+
- **Reduce initial bundle size** - Import only what your application actually needs in the initial load
19+
- **Improve build performance** - Smaller dependency graphs lead to faster builds
20+
21+
## Benefits
22+
23+
✅ **Code Splitting** - Each component is lazy-loadable
24+
✅ **Smaller Initial Bundles** - Import only what you need
25+
✅ **Better Performance** - Reduced individual bundle sizes mean faster load times
26+
✅ **Clean Architecture** - No circular dependencies
27+
✅ **Full Backwards Compatibility** - Main entry point still works
28+
✅ **Granular Grid Imports** - Load only the specific grid type you need
29+
30+
## Entry Points Structure
31+
32+
### Core Entry Points
33+
34+
- `igniteui-angular/core` - Core utilities, services, and base types (e.g., `IgxOverlayService`, `DisplayDensity`)
35+
- `igniteui-angular/directives` - Common directives
36+
37+
### Component Entry Points
38+
39+
Each component has its own entry point following the pattern `igniteui-angular/<component-name>`:
40+
41+
- `igniteui-angular/accordion`
42+
- `igniteui-angular/action-strip`
43+
- `igniteui-angular/avatar`
44+
- `igniteui-angular/badge`
45+
- `igniteui-angular/banner`
46+
- `igniteui-angular/bottom-nav`
47+
- `igniteui-angular/button`
48+
- `igniteui-angular/button-group`
49+
- `igniteui-angular/calendar`
50+
- `igniteui-angular/card`
51+
- `igniteui-angular/carousel`
52+
- `igniteui-angular/checkbox`
53+
- `igniteui-angular/chips`
54+
- `igniteui-angular/combo`
55+
- `igniteui-angular/date-picker`
56+
- `igniteui-angular/date-range-picker`
57+
- `igniteui-angular/dialog`
58+
- `igniteui-angular/drop-down`
59+
- `igniteui-angular/expansion-panel`
60+
- `igniteui-angular/icon`
61+
- `igniteui-angular/input-group`
62+
- `igniteui-angular/list`
63+
- `igniteui-angular/navbar`
64+
- `igniteui-angular/navigation-drawer`
65+
- `igniteui-angular/paginator`
66+
- `igniteui-angular/progressbar`
67+
- `igniteui-angular/query-builder`
68+
- `igniteui-angular/radio`
69+
- `igniteui-angular/select`
70+
- `igniteui-angular/simple-combo`
71+
- `igniteui-angular/slider`
72+
- `igniteui-angular/snackbar`
73+
- `igniteui-angular/splitter`
74+
- `igniteui-angular/stepper`
75+
- `igniteui-angular/switch`
76+
- `igniteui-angular/tabs`
77+
- `igniteui-angular/time-picker`
78+
- `igniteui-angular/toast`
79+
- `igniteui-angular/tree`
80+
81+
### Grid Entry Points
82+
83+
Grid components are split into granular entry points for optimal code splitting:
84+
85+
- `igniteui-angular/grids/core` - Shared grid infrastructure (columns, toolbar, filtering, sorting, pipes, and utilities)
86+
- `igniteui-angular/grids/grid` - Data Grid component (`IgxGridComponent`)
87+
- `igniteui-angular/grids/tree-grid` - Tree Grid component (`IgxTreeGridComponent`)
88+
- `igniteui-angular/grids/hierarchical-grid` - Hierarchical Grid component (`IgxHierarchicalGridComponent`, `IgxRowIslandComponent`)
89+
- `igniteui-angular/grids/pivot-grid` - Pivot Grid component (`IgxPivotGridComponent`, `IgxPivotDataSelectorComponent`)
90+
91+
## Migration
92+
93+
### Automatic Migration
94+
95+
The recommended approach is to migrate your imports automatically during the `ng update` process. When updating to version 21.0.0, you'll be prompted to migrate imports:
96+
97+
```cmd
98+
ng update igniteui-angular
99+
```
100+
101+
When prompted, choose **"Yes"** to migrate imports to new entry points for optimal bundle sizes.
102+
103+
Alternatively, you can run the migration separately:
104+
105+
```cmd
106+
ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0
107+
```
108+
109+
### Manual Migration
110+
111+
If you prefer to migrate manually or need to update specific imports, follow this pattern:
112+
113+
#### Before (v20.x and earlier)
114+
115+
```typescript
116+
import {
117+
IgxGridComponent,
118+
IgxTreeGridComponent,
119+
IgxInputDirective,
120+
IgxBottomNavComponent,
121+
DisplayDensity,
122+
Direction,
123+
GridBaseAPIService,
124+
IgxOverlayService,
125+
IFilteringExpression
126+
} from 'igniteui-angular';
127+
```
128+
129+
#### After (v21.0.0)
130+
131+
```typescript
132+
import { DisplayDensity, IgxOverlayService } from 'igniteui-angular/core';
133+
import { IFilteringExpression, GridBaseAPIService } from 'igniteui-angular/grids/core';
134+
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
135+
import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';
136+
import { IgxInputDirective } from 'igniteui-angular/input-group';
137+
import { IgxBottomNavComponent } from 'igniteui-angular/bottom-nav';
138+
import { CarouselAnimationDirection } from 'igniteui-angular/carousel';
139+
```
140+
141+
### Type Renames
142+
143+
To avoid naming conflicts with the new architecture, some types have been renamed:
144+
145+
- `Direction` → `CarouselAnimationDirection` (in the carousel entry point)
146+
147+
```typescript
148+
// Before
149+
import { Direction } from 'igniteui-angular';
150+
151+
// After
152+
import { CarouselAnimationDirection } from 'igniteui-angular/carousel';
153+
```
154+
155+
## Backwards Compatibility
156+
157+
The main entry point (`igniteui-angular`) maintains **full backwards compatibility** by re-exporting all granular entry points. You can continue using imports from the main entry point without any changes:
158+
159+
```typescript
160+
// This still works and will continue to work
161+
import { IgxGridComponent, IgxButtonDirective } from 'igniteui-angular';
162+
```
163+
164+
However, **we strongly recommend migrating to the new entry points** to take advantage of better tree-shaking and smaller bundle sizes.
165+
166+
## Usage Examples
167+
168+
### Example 1: Simple Component Usage
169+
170+
If you only need a button and an input, import just those entry points:
171+
172+
```typescript
173+
import { Component } from '@angular/core';
174+
import { IgxButtonDirective } from 'igniteui-angular/button';
175+
import {
176+
IgxInputGroupComponent,
177+
IgxInputDirective,
178+
IgxLabelDirective
179+
} from 'igniteui-angular/input-group';
180+
181+
@Component({
182+
selector: 'app-form',
183+
standalone: true,
184+
imports: [
185+
IgxButtonDirective,
186+
IgxInputGroupComponent,
187+
IgxInputDirective,
188+
IgxLabelDirective
189+
],
190+
template: `
191+
<igx-input-group>
192+
<label igxLabel>Name</label>
193+
<input igxInput type="text" />
194+
</igx-input-group>
195+
<button igxButton="contained">Submit</button>
196+
`
197+
})
198+
export class FormComponent {}
199+
```
200+
201+
### Example 2: Grid with Specific Features
202+
203+
Import only the grid type you need along with core grid utilities:
204+
205+
```typescript
206+
import { Component } from '@angular/core';
207+
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
208+
import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';
209+
210+
@Component({
211+
selector: 'app-data-grid',
212+
standalone: true,
213+
imports: [IgxGridComponent, IgxGridToolbarComponent],
214+
template: `
215+
<igx-grid [data]="data" [autoGenerate]="true">
216+
<igx-grid-toolbar></igx-grid-toolbar>
217+
</igx-grid>
218+
`
219+
})
220+
export class DataGridComponent {
221+
public data = [
222+
{ id: 1, name: 'John' },
223+
{ id: 2, name: 'Jane' }
224+
];
225+
}
226+
```
227+
228+
### Example 3: Lazy Loading Components
229+
230+
With the new entry points, you can easily lazy-load components:
231+
232+
```typescript
233+
// app.routes.ts
234+
import { Routes } from '@angular/router';
235+
236+
export const routes: Routes = [
237+
{
238+
path: 'grid',
239+
loadComponent: () =>
240+
import('./features/grid/grid.component')
241+
.then(m => m.GridComponent)
242+
},
243+
{
244+
path: 'tree-grid',
245+
loadComponent: () =>
246+
import('./features/tree-grid/tree-grid.component')
247+
.then(m => m.TreeGridComponent)
248+
}
249+
];
250+
```
251+
252+
```typescript
253+
// features/grid/grid.component.ts
254+
import { Component } from '@angular/core';
255+
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
256+
257+
@Component({
258+
selector: 'app-grid',
259+
standalone: true,
260+
imports: [IgxGridComponent],
261+
template: `<igx-grid [data]="data" [autoGenerate]="true"></igx-grid>`
262+
})
263+
export class GridComponent {
264+
public data = [];
265+
}
266+
```
267+
268+
## Migration Options Summary
269+
270+
You have three options when updating to v21.0.0:
271+
272+
### Option 1: Migrate During Update (Recommended)
273+
274+
```cmd
275+
ng update igniteui-angular
276+
```
277+
278+
When prompted, choose **"Yes"** to migrate imports.
279+
280+
### Option 2: Keep Using Main Entry Point
281+
282+
```cmd
283+
ng update igniteui-angular
284+
```
285+
286+
When prompted, choose **"No"** to continue using the main entry point. The library remains fully backwards compatible, but you won't benefit from optimal bundle sizes.
287+
288+
### Option 3: Migrate Later
289+
290+
Update without migrating (choose "No" when prompted):
291+
292+
```cmd
293+
ng update igniteui-angular
294+
```
295+
296+
Migrate manually later:
297+
298+
```cmd
299+
ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0
300+
```
301+
302+
## Best Practices
303+
304+
1. **Use specific entry points** - Import from the most specific entry point possible (e.g., `igniteui-angular/grids/grid` instead of `igniteui-angular`)
305+
2. **Leverage lazy loading** - Combine entry points with Angular's lazy loading for even better performance
306+
3. **Import only what you need** - Don't import the entire `core` entry point if you only need one service
307+
4. **Check bundle analyzer** - Use tools like [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) to verify your bundle size improvements
308+
5. **Update regularly** - Keep your Ignite UI for Angular version up to date to benefit from the latest optimizations
309+
310+
## Additional Resources
311+
312+
- [Angular Package Format - Entry Points and Code Splitting](https://angular.io/guide/angular-package-format#entrypoints-and-code-splitting)
313+
- [Ignite UI for Angular Update Guide](update-guide.md)
314+
- [Ignite UI for Angular CHANGELOG](https://github.com/IgniteUI/igniteui-angular/blob/master/CHANGELOG.md)
315+
- [Ignite UI for Angular GitHub Repository](https://github.com/IgniteUI/igniteui-angular)
316+
317+
## API References
318+
319+
For detailed information about specific components and their APIs, refer to the component documentation:
320+
321+
- [Grid](../grid/grid.md)
322+
- [Tree Grid](../treegrid/tree-grid.md)
323+
- [Hierarchical Grid](../hierarchicalgrid/hierarchical-grid.md)
324+
- [Pivot Grid](../pivotGrid/pivot-grid.md)

‎en/components/general/update-guide.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,37 @@ Unfortunately not all changes can be automatically updated. Changes below are sp
6060

6161
For example: if you are updating from version 6.2.4 to 7.1.0 you'd start from the "From 6.x .." section apply those changes and work your way up:
6262

63+
## From 20.x to 21.0.x
64+
65+
### Multiple Entry Points Support
66+
67+
Version 21.0.0 introduces **multiple entry points** for better tree-shaking and code splitting. The main entry point (`igniteui-angular`) remains fully backwards compatible, but migrating to granular entry points is recommended for optimal bundle sizes.
68+
69+
**Key changes:**
70+
- Components organized into dedicated entry points (e.g., `igniteui-angular/grids/grid`, `igniteui-angular/button`)
71+
- Some components relocated (input directives, autocomplete, radio group)
72+
- Type rename: `Direction` → `CarouselAnimationDirection`
73+
74+
**Migration:**
75+
76+
When updating, you'll be prompted to migrate imports automatically:
77+
78+
```cmd
79+
ng update igniteui-angular
80+
```
81+
82+
Choose **"Yes"** when prompted, or migrate later with:
83+
84+
```cmd
85+
ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0
86+
```
87+
88+
For complete details on entry points, migration options, breaking changes, and usage examples, see the [Code Splitting and Multiple Entry Points guide](code-splitting-and-multiple-entry-points.md).
89+
90+
### Dependency Injection Refactor
91+
92+
All internal dependency injection now uses the `inject()` API. This generally doesn't affect application code, but if you extend Ignite UI components or services, you may need to update your constructors to use `inject()` instead of constructor parameters.
93+
6394
## From 17.2.x to 18.0.x
6495

6596
### Breaking changes

‎en/components/toc.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
href: general/update-guide.md
2626
new: false
2727
updated: true
28+
- name: Multiple Entry Points
29+
href: general/code-splitting-and-multiple-entry-points.md
30+
new: true
2831
- name: Server-side rendering (SSR)
2932
href: general/ssr-rendering.md
3033
new: false

0 commit comments

Comments
 (0)