Skip to content

Commit f4f1bcc

Browse files
Angular: Add Named Components Migration Guide (#8171)
1 parent 1856812 commit f4f1bcc

File tree

2 files changed

+65
-0
lines changed

2 files changed

+65
-0
lines changed
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
DevExtreme Angular v24.2 introduced named configuration components. They are strictly typed and specific to their parent UI component. Strict typing allows code completion and hinting systems to suggest only valid configurations and detect invalid usage.
2+
3+
The following code snippet demonstrates named and generic configuration components:
4+
5+
<!-- tab: app.component.html -->
6+
<!-- Named configuration component -->
7+
<dx-form>
8+
<dxi-form-item></dxi-form-item>
9+
</dx-form>
10+
11+
<!-- Generic configuration component -->
12+
<dx-form>
13+
<dxi-item></dxi-item>
14+
</dx-form>
15+
16+
[note]
17+
18+
- We recommend upgrading to named configuration components to improve your development experience.
19+
- DevExtreme v25.2+ displays warnings in the console if you use generic configuration components.
20+
21+
[/note]
22+
23+
To upgrade your Angular application to named configuration components, use the following DevExtreme CLI command: `devextreme migrate`. Note that this command requires our DevExtreme Schematics package. DevExtreme CLI installs this package in the NPM cache when you run `migrate`. You can also install the package to your project or global `node_modules`:
24+
25+
// Project install
26+
npm i devextreme-schematics --save-dev
27+
28+
// Global install
29+
npm i -g devextreme-schematics
30+
31+
To upgrade your application to named configuration components, run the command in your project root:
32+
33+
// If DevExtreme CLI is installed (in your project or global node_modules)
34+
devextreme migrate angular-config-components
35+
36+
// If DevExtreme CLI is not installed
37+
npx devextreme-cli migrate angular-config-components
38+
39+
<img src="/images/DevExtremeCLI/devextreme-cli-migrate-terminal.png" alt="A terminal window that displays the output of two commands, including a DevExtreme CLI command."></img>
40+
41+
You can add the `--dry` argument to preview changes before upgrading:
42+
43+
// If DevExtreme CLI is installed (in your project or global node_modules)
44+
devextreme migrate angular-config-components --dry
45+
46+
// If DevExtreme CLI is not installed
47+
npx devextreme-cli migrate angular-config-components --dry
48+
49+
This command can upgrade generic configuration components in both external templates (.html files) and inline templates (defined within `@Component({})` class decorators). Inline template migration requires the TypeScript package. You can install this package to your project folder or the global `node_modules`:
50+
51+
// Project install
52+
npm i typescript --save-dev
53+
54+
// Global install
55+
npm i -g typescript
56+
57+
DevExtreme CLI can also install TypeScript temporarily (to the NPM cache).
58+
59+
If your application does not use inline templates, you can instruct the command to skip script files to speed up migration. Specify an empty `--script-include` value ('' or []):
60+
61+
npm devextreme migrate angular-config-components --script-include=''
62+
// ===== or =====
63+
npx devextreme-cli migrate angular-config-components --script-include=''
64+
65+
[tags] angular
76.2 KB
Loading

0 commit comments

Comments
 (0)