|
| 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 |
0 commit comments