You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
DevExtreme schematics are workflow tools you can use in an Angular application created with [DevExtreme CLI](https://github.com/devexpress/DevExtreme-CLI) to add DevExtreme libraries or views and perform other DevExtreme-related tasks. Read [this article](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2) for more information on Angular Schematics.
2
+
DevExtreme Schematics are Angular workflow tools for applications created with [DevExtreme CLI](https://github.com/devexpress/DevExtreme-CLI). You can use these tools to add application views and layouts to your apps or to perform other tasks related to DevExtreme and the DevExtreme [Angular Application Template](https://devexpress.github.io/devextreme-angular-template). For more information on Angular Schematics, refer to the following topic: [Introduction to Angular Schematics](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2).
3
3
4
4
## Included Schematics
5
5
6
6
This package includes the following schematics:
7
7
8
8
-[install](src/install)
9
-
Adds DevExtreme to an Angular application
9
+
Adds DevExtreme to an Angular application.
10
10
11
11
-[add-layout](src/add-layout)
12
-
Adds a DevExtreme layout to a DevExtreme Angular application
12
+
Adds a DevExtreme layout to an Angular application.
13
13
14
14
-[add-app-template](src/add-app-template)
15
-
Adds a DevExtreme layout template to an Angular application
15
+
Adds a DevExtreme app template to an Angular application.
16
16
17
17
-[add-sample-views](src/add-sample-views)
18
-
Adds sample views to a DevExtreme Angular application
18
+
Adds sample views to an Angular application.
19
19
20
20
-[add-view](src/add-view)
21
-
Adds a view to a DevExtreme Angular application
21
+
Adds a view to an Angular application.
22
22
23
23
## TypeScript Dependency & Global CLI Usage
24
24
@@ -28,21 +28,22 @@ Some DevExtreme migration schematics require TypeScript to process inline Angula
28
28
- Your project's node_modules
29
29
- The global node_modules
30
30
31
-
If TypeScript is not found, inline template migration will be skipped and a warning will be shown with resolution attempts and errors.
31
+
If the CLI fails to find TypeScript, it skips inline template migration and displays a warning message that contains resolution attempts and errors.
32
32
33
-
### How to Fix TypeScript Not Available
33
+
### How to Install TypeScript
34
34
35
-
1.**Local Project:**Install TypeScript in your project root:
35
+
1.**Local Project:**To install TypeScript in a project, run the following command:
36
36
```sh
37
37
npm install typescript --save-dev
38
38
```
39
-
2.**Global CLI:**If you use the CLI globally, also install TypeScript globally:
39
+
2.**Global CLI:**To install TypeScript globally on your machine, run the following command:
40
40
```sh
41
41
npm install -g typescript
42
42
```
43
-
3.**npx Usage:** If you use npx, ensure TypeScript is available in your workspace or globally.
44
-
4.**Troubleshooting:**
45
-
- Some npm global installs may not link dependencies as expected. If you see repeated TypeScript resolution errors, try running the CLI from a project where TypeScript is installed locally.
43
+
44
+
**Troubleshooting**
45
+
46
+
- Some npm global installs may not link dependencies as expected. If you experience repeated TypeScript resolution errors, try running CLI commands from a project where TypeScript is installed locally.
46
47
- You can also manually link TypeScript to your global node_modules if needed.
47
48
48
-
If you continue to see errors, review the warning output for resolution attempts and check your npm/node installation paths.
49
+
If errors persist, review resolution attempt information in the warning output and check your npm/node installation paths.
A schematic that migrates deprecated nested DevExtreme components to the new config-based structure.
3
+
A schematic that migrates generic DevExtreme configuration components.
4
4
5
5
## Description
6
6
7
-
This schematic automatically migrates your Angular application to use the latest DevExtreme component structure by replacing deprecated nested components (such as `<dxi-column>`) with their new config-based equivalents (such as `<dxi-data-grid-column>`). The migration command is available as a top-level DevExtreme CLI command and can be run from any directory.
7
+
This schematic automatically migrates generic configuration components to named configuration components in your DevExtreme-powered Angular app. The migration command is available as a top-level DevExtreme CLI command that you can run from any directory.
8
8
9
9
## Usage
10
10
11
11
### Via DevExtreme CLI (Recommended)
12
12
13
-
The migration command can be run from any directory and will work both inside and outside Angular workspaces:
13
+
You can run the migration command from any directory, including both inside and outside Angular workspaces:
14
14
15
15
```bash
16
16
devextreme migrate angular-config-components
17
17
```
18
18
19
-
### Options (All Optional)
19
+
### Parameters (All Optional)
20
20
21
21
-`--include`: Glob patterns of template files to include (default: `**/*.html`). Separate multiple patterns with commas.
22
-
-`--script-include`: Glob patterns for TypeScript/JavaScript files to scan for inline `@Component({ template })`(default: `**/*.ts,**/*.js`). Set to empty to disable.
23
-
-`--dry`: Run in dry mode to preview changes without applying them (default: `false`)
22
+
-`--script-include`: Glob patterns for TypeScript/JavaScript files to scan for inline templates (default: `**/*.ts,**/*.js`). Pass an empty value ('' or []) to disable.
23
+
-`--dry`: Run in dry mode to preview changes without applying them (default: `false`).
24
24
25
25
### Examples
26
26
27
27
```bash
28
-
# Migrate all HTML templates and inline templates (using defaults)
28
+
# Migrate all HTML templates and inline templates (default configuration)
Alternatively, you can run the schematic directly with Angular CLI:
46
+
You can also use the Angular CLI to run the schematic:
47
47
48
48
```bash
49
49
ng g devextreme-schematics:migrate-config-components
50
50
```
51
51
52
-
## What it does
52
+
## Sample results
53
53
54
-
This schematic automatically updates your templates to replace deprecated nested components with the new config-based component structure. For example:
DevExtreme Angular components are moving from a nested structure (e.g., `<dxi-column>`) to a config-based structure (e.g., `<dxi-data-grid-column>`) for improved clarity, maintainability, and future compatibility. This schematic automates the migration process to help you keep your codebase up to date with the latest DevExtreme standards.
75
-
76
70
## Requirements
77
71
78
-
- Node.js and npm/yarn installed
79
-
- Angular application with DevExtreme components (when running inside a workspace)
80
-
- DevExtreme Angular version that supports the new component structure
81
-
82
-
## Notes
83
-
84
-
- The command can be run from any directory, not just Angular workspaces
85
-
- When run outside an Angular workspace, the underlying Angular CLI will show appropriate error messages
86
-
- All options are optional and have sensible defaults
87
-
- The command uses the latest version of `devextreme-schematics` automatically
72
+
- Node.js and npm or yarn.
73
+
- Angular application with DevExtreme components.
74
+
- DevExtreme Angular version that supports named configuration components.
0 commit comments