chore: update devextreme-schematic angular dep to 20

packages/devextreme-schematics/package.json

@@ -22,9 +22,9 @@
   ],
   "schematics": "./src/collection.json",
   "dependencies": {
-    "@angular-devkit/core": "^19.2.27",
-    "@angular-devkit/schematics": "^19.2.27",
-    "@schematics/angular": "^19.2.27",
+    "@angular-devkit/core": "^20.3.37",
+    "@angular-devkit/schematics": "^20.3.37",
+    "@schematics/angular": "^20.3.37",
     "parse5": "^7.3.0",
     "picomatch": "^4.0.5",
     "semver": "^7.8.5"

packages/devextreme-schematics/src/add-app-template/index_spec.ts

@@ -58,7 +58,7 @@ describe('add-app-template', () => {
     expect(tree.files)
       .toContain('/projects/testApp2/src/themes/metadata.base.json');
     expect(tree.files)
-      .toContain('/projects/testApp2/src/app/pages/home/home.component.ts');
+      .toContain('/projects/testApp2/src/app/pages/home/home.ts');
   });
 
   it('should consider the `updateBudgets` option', async () => {

packages/devextreme-schematics/src/add-layout/index_spec.ts

@@ -83,7 +83,7 @@ describe('layout', () => {
     expect(devextremeConfigContent).toContain('"inputFile": "src/themes/metadata.additional.json"');
     expect(devextremeConfigContent).toMatch(/\n\s{2}\S/g);
 
-    const componentContent = tree.readContent('/src/app/app.component.html');
+    const componentContent = tree.readContent('/src/app/app.html');
     expect(componentContent).toContain('app-side-nav-outer-toolbar title="{{appInfo.title}}"');
 
     const stylesContent = tree.readContent('/src/dx-styles.scss');
@@ -101,16 +101,16 @@ describe('layout', () => {
     expect(styles[3]).toBe('src/themes/generated/theme.additional.dark.css');
     expect(styles[4]).toBe('src/themes/generated/theme.additional.css');
 
-    const appContent = tree.readContent('/src/app/app.component.ts');
+    const appContent = tree.readContent('/src/app/app.ts');
     expect(appContent).toContain('import { DxHttpModule }');
     expect(appContent)
       .toContain('import { SideNavOuterToolbarComponent as SideNavToolbarComponent }');
     expect(appContent)
       .toContain(`import { AuthService, ScreenService, AppInfoService } from './shared/services';`);
     expect(appContent)
       .toContain('import { FooterComponent }');
-    expect(appContent).toContain('templateUrl: \'./app.component.html\',');
-    expect(appContent).toContain('styleUrls: [\'./app.component.scss\']');
+    expect(appContent).toContain('templateUrl: \'./app.html\',');
+    expect(appContent).toContain('styleUrls: [\'./app.scss\']');
     expect(appContent).toContain('selector: \'app-root\',');
 
     const navigationMenu = tree.readContent(
@@ -217,18 +217,18 @@ describe('layout', () => {
     options.resolveConflicts = 'createNew';
     const tree = await runner.runSchematic('add-layout', options, appTree);
 
-    expect(tree.files).toContain('/src/app/app1.component.ts');
+    expect(tree.files).toContain('/src/app/app1.ts');
 
-    const componentContent = tree.readContent('/src/app/app1.component.html');
+    const componentContent = tree.readContent('/src/app/app1.html');
     expect(componentContent).toContain('app-side-nav-outer-toolbar title="{{appInfo.title}}"');
 
-    const appContent = tree.readContent('/src/app/app.component.ts');
-    expect(appContent).toMatch(/templateUrl: '.\/app.component.html',/);
-    expect(appContent).toMatch(/styleUrl: '.\/app.component.scss'/);
+    const appContent = tree.readContent('/src/app/app.ts');
+    expect(appContent).toMatch(/templateUrl: '.\/app.html',/);
+    expect(appContent).toMatch(/styleUrl: '.\/app.scss'/);
 
-    const newAppContent = tree.readContent('/src/app/app1.component.ts');
-    expect(newAppContent).toMatch(/templateUrl: '.\/app1.component.html',/);
-    expect(newAppContent).toMatch(/styleUrls: \['.\/app1.component.scss'\]/);
+    const newAppContent = tree.readContent('/src/app/app1.ts');
+    expect(newAppContent).toMatch(/templateUrl: '.\/app1.html',/);
+    expect(newAppContent).toMatch(/styleUrls: \['.\/app1.scss'\]/);
     expect(newAppContent).toContain(`import { AuthService, ScreenService, AppInfoService } from './shared/services';`);
 
     const appInfo = tree.readContent('/src/app/shared/services/app-info.service.ts');
@@ -267,7 +267,7 @@ describe('layout', () => {
     options.layout = 'side-nav-inner-toolbar';
     options.resolveConflicts = 'override';
     const tree = await runner.runSchematic('add-layout', options, appTree);
-    const content = tree.readContent('/src/app/app.component.html');
+    const content = tree.readContent('/src/app/app.html');
 
     expect(content).toContain('app-side-nav-inner-toolbar title="{{appInfo.title}}"');
   });
@@ -308,7 +308,7 @@ describe('layout', () => {
       project: 'testApp2'
     }, appTree);
 
-    const appContent = tree.readContent('projects/testApp2/src/app/app.component.ts');
+    const appContent = tree.readContent('projects/testApp2/src/app/app.ts');
     expect(appContent).toContain('selector: \'app2-root\',');
 
     const content = tree.readContent('/devextreme.json');

packages/devextreme-schematics/src/add-sample-views/files/pages/home/home.component.ts → packages/devextreme-schematics/src/add-sample-views/files/pages/home/home.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 
 @Component({
-  templateUrl: 'home.component.html',
-  styleUrls: [ './home.component.scss' ],
+  templateUrl: 'home.html',
+  styleUrls: [ './home.scss' ],
   standalone: false
 })
 

packages/devextreme-schematics/src/add-sample-views/files/pages/profile/profile.component.ts → packages/devextreme-schematics/src/add-sample-views/files/pages/profile/profile.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 import { DxFormModule } from 'devextreme-angular/ui/form';
 
 @Component({
-  templateUrl: 'profile.component.html',
-  styleUrls: [ './profile.component.scss' ],
+  templateUrl: 'profile.html',
+  styleUrls: [ './profile.scss' ],
   standalone: true,
   imports: [DxFormModule],
 })

packages/devextreme-schematics/src/add-sample-views/files/pages/tasks/tasks.component.ts → packages/devextreme-schematics/src/add-sample-views/files/pages/tasks/tasks.ts

@@ -3,8 +3,8 @@ import { DxDataGridModule } from 'devextreme-angular/ui/data-grid';
 import { CustomStore } from 'devextreme-angular/common/data';
 
 @Component({
-  templateUrl: 'tasks.component.html',
-  styleUrls: ['tasks.component.scss'],
+  templateUrl: 'tasks.html',
+  styleUrls: ['tasks.scss'],
   standalone: true,
   imports: [DxDataGridModule]
 })

packages/devextreme-schematics/src/add-sample-views/index.ts

@@ -25,19 +25,7 @@ import {
 import { getSourceFile } from '../utility/source';
 
 const sampleViewOptions = [
-  {
-    name: 'home',
-    componentName: 'HomeComponent',
-    relativePath: './pages/home/home.component'
-  }, {
-    name: 'profile',
-    componentName: 'ProfileComponent',
-    relativePath: './pages/profile/profile.component'
-  }, {
-    name: 'tasks',
-    componentName: 'TasksComponent',
-    relativePath: './pages/tasks/tasks.component'
-}];
+  { name: 'home' }, { name: 'profile' }, { name: 'tasks'}];
 
 const navigations = [
   `  {

packages/devextreme-schematics/src/add-sample-views/index_spec.ts

@@ -45,7 +45,9 @@ describe('sample views', () => {
     expect(moduleContent).toMatch(/component: HomeComponent/);
     expect(moduleContent).toMatch(/path: 'home'/);
 
-    expect(moduleContent).toMatch(/import { HomeComponent } from /);
+    expect(moduleContent).toContain(`import { HomeComponent } from './pages/home/home';`);
+    expect(moduleContent).toContain(`import { ProfileComponent } from './pages/profile/profile';`);
+    expect(moduleContent).toContain(`import { TasksComponent } from './pages/tasks/tasks';`);
 
     const navigationContent = tree.readContent('/src/app/app-navigation.ts');
     expect(navigationContent).toMatch(/text: 'Home'/);

packages/devextreme-schematics/src/add-view/index.ts

@@ -35,6 +35,11 @@ import { humanize } from '../utility/string';
 async function getPathToFile(host: Tree, projectName: string, moduleName: string) {
   const rootPath = await getApplicationPath(host, projectName);
 
+  const standalonePath = normalize(`${rootPath}/${moduleName}.ts`);
+  if (host.exists(standalonePath)) {
+    return standalonePath;
+  }
+
   try {
     return findModuleFromOptions(host, { name: moduleName, path: rootPath, module: moduleName });
   } catch (error) {
@@ -88,7 +93,7 @@ export function addViewToRouting(options: any) {
     const routingModulePath = await getPathToFile(host, options.project, options.module);
 
     if (!routingModulePath) {
-      throw new SchematicsException('Specified module does not exist.');
+      throw new SchematicsException(`Specified module ${options.module} does not exist.`);
     }
 
     addRedirectRoute(host, routingModulePath, options.name);
@@ -106,7 +111,7 @@ export function addViewToRouting(options: any) {
 
       const name = options.name.replace(/^pages\//, '');
       const componentName = getRouteComponentName(name);
-      const importChanges = insertImport(source, routingModulePath, componentName, `./pages/${name}/${name}.component`);
+      const importChanges = insertImport(source, routingModulePath, componentName, `./pages/${name}/${name}`);
       applyChanges(host, [importChanges], routingModulePath);
     }
     return host;
@@ -141,7 +146,7 @@ function addContentToView(options: any) {
   const name = strings.dasherize(basename(normalize(options.name)));
   const path = `${dirname(options.name)}/${name}`;
   const title = humanize(name);
-  const componentPath = `${path}/${name}.component.html`;
+  const componentPath = `${path}/${name}.html`;
   const content = `<h2>${title}</h2>
 <div class="content-block">
     <div class="dx-card responsive-paddings">Put your content here</div>
@@ -154,13 +159,13 @@ function addContentToView(options: any) {
 function addContentToTS(options: any) {
   const name = strings.dasherize(basename(normalize(options.name)));
   const path = `${dirname(options.name)}/${name}`;
-  const componentPath = `${path}/${name}.component.ts`;
+  const componentPath = `${path}/${name}.ts`;
   const content = `import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-${name}',
-  templateUrl: './${name}.component.html',
-  styleUrl: './${name}.component.css',
+  templateUrl: './${name}.html',
+  styleUrl: './${name}.css',
   standalone: true
 })
 export class ${strings.classify(basename(normalize(name)))}Component {

packages/devextreme-schematics/src/add-view/index_spec.ts

@@ -36,6 +36,7 @@ describe('view', () => {
   };
 
   const angularSchematicsCollection = require.resolve('../../node_modules/@schematics/angular/collection.json');
+
   const schematicRunner = new SchematicTestRunner('@schematics/angular', angularSchematicsCollection);
   let appTree: UnitTestTree;
 
@@ -50,16 +51,16 @@ describe('view', () => {
     let tree = await runner.runSchematic('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree);
     tree = await runner.runSchematic('add-view', componentOptions, appTree);
 
-    expect(tree.files).toContain('/src/app/pages/test/test.component.ts');
-    expect(tree.files).toContain('/src/app/pages/test/test.component.html');
+    expect(tree.files).toContain('/src/app/pages/test/test.ts');
+    expect(tree.files).toContain('/src/app/pages/test/test.html');
 
-    const contentHTML = tree.readContent('/src/app/pages/test/test.component.html');
-    const contentTS = tree.readContent('/src/app/pages/test/test.component.ts');
+    const contentHTML = tree.readContent('/src/app/pages/test/test.html');
+    const contentTS = tree.readContent('/src/app/pages/test/test.ts');
 
     expect(contentHTML).toMatch(/<h2>Test<\/h2>/);
     expect(contentTS).toContain(`selector: 'app-${componentName}'`);
-    expect(contentTS).toContain(`templateUrl: './${componentName}.component.html'`);
-    expect(contentTS).toContain(`styleUrl: './${componentName}.component.css'`);
+    expect(contentTS).toContain(`templateUrl: './${componentName}.html'`);
+    expect(contentTS).toContain(`styleUrl: './${componentName}.css'`);
     expect(contentTS).toContain('standalone: true');
     expect(contentTS).toContain(`export class ${strings.classify(basename(normalize(componentName)))}Component`);
   });
@@ -94,7 +95,7 @@ describe('view', () => {
     }, tree);
     tree = await runner.runSchematic('add-view', options, tree);
 
-    const moduleContent = tree.readContent('/src/app/test/test-routing.module.ts');
+    const moduleContent = tree.readContent('/src/app/test/test-routing-module.ts');
 
     expect(moduleContent).toMatch(/component: TestComponent/);
     expect(moduleContent).toMatch(/path: 'pages\/test'/);
@@ -131,7 +132,7 @@ export const navigation: NavigationItem[] = [
     icon: 'home'
   }
 ];`);
-    const pageContent = tree.readContent('/src/app/pages/some-test/some-test.component.html');
+    const pageContent = tree.readContent('/src/app/pages/some-test/some-test.html');
     expect(pageContent).toMatch(/<h2>Some Test<\/h2>/);
   });
 
@@ -141,7 +142,7 @@ export const navigation: NavigationItem[] = [
     let tree = await runner.runSchematic('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree);
     tree = await runner.runSchematic('add-view', componentOptions, appTree);
 
-    expect(tree.files).toContain('/src/app/folder/test/test.component.ts');
-    expect(tree.files).toContain('/src/app/folder/test/test.component.html');
+    expect(tree.files).toContain('/src/app/folder/test/test.ts');
+    expect(tree.files).toContain('/src/app/folder/test/test.html');
   });
 });