feat: added angular 20 for app

sergey-kras · sergey-kras · commit 8489f87f48a0 · 2025-05-20T16:35:48.000+05:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/devextreme-cli/package-lock.json b/packages/devextreme-cli/package-lock.json
diff --git a/packages/devextreme-cli/src/applications/application.angular.js b/packages/devextreme-cli/src/applications/application.angular.js
@@ -82,8 +82,11 @@ const bumpAngular = (appPath, versionTag) => {
     modifyJson(getPackageJsonPath(appPath), ({ dependencies, devDependencies, ...rest }) => {
         const bump = (section) => {
             for(const depName in section) {
-                section[depName] = depName.startsWith('@angular') ? versionTag : section[depName];
+                if(depName.startsWith('@angular')) {
+                    section[depName] = versionTag;
+                }
             }
+            return section;
         };
 
         return {
diff --git a/packages/devextreme-cli/src/utility/ng-version.js b/packages/devextreme-cli/src/utility/ng-version.js
@@ -19,6 +19,7 @@ const getPublicNgVersion = () => {
     return new semver(version);
 };
 
+// here ng version
 const getNgCliVersion = () => {
     let ngCliVersion = getLocalNgVersion();
     if(!ngCliVersion) {
diff --git a/packages/devextreme-cli/src/utility/template-creator.js b/packages/devextreme-cli/src/utility/template-creator.js
@@ -15,6 +15,7 @@ const applyTemplateToFile = (filePath, templateOptions) => {
     return fileContent;
 };
 
+// here add page to app
 const addPageToApp = (pageName, pageDir, templatePagesPath, getCorrectExtension, { getPageFileName = () => pageName } = {}) => {
     fs.readdirSync(templatePagesPath).forEach((pageItem) => {
         const pagePath = path.join(pageDir, `${getPageFileName(pageName, pageItem)}${getCorrectExtension(extname(pageItem))}`);
@@ -29,6 +30,7 @@ const addPageToApp = (pageName, pageDir, templatePagesPath, getCorrectExtension,
     });
 };
 
+// here move template files to project
 const moveTemplateFilesToProject = (templateFolder, appPath, templateOptions, getCorrectPath, pathToFileRelativelyRoot) => {
     const relativePath = pathToFileRelativelyRoot || '';
     const pathToFiles = path.join(templateFolder, relativePath);
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/__name__.html b/packages/devextreme-schematics/src/add-layout/files/src/app/__name__.html
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/__name__.scss b/packages/devextreme-schematics/src/add-layout/files/src/app/__name__.scss
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/__name__.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/__name__.ts
@@ -9,8 +9,8 @@ import { UnauthenticatedContentComponent } from './unauthenticated-content';
 
 @Component({
   selector: '<%= prefix %>-root',
-  templateUrl: './<%= name %>.component.html',
-  styleUrls: ['./<%= name %>.component.scss'],
+  templateUrl: './<%= name %>.html',
+  styleUrls: ['./<%= name %>.scss'],
   standalone: true,
   imports: [
     RouterModule,
diff --git a/packages/devextreme-schematics/src/add-layout/index.ts b/packages/devextreme-schematics/src/add-layout/index.ts
@@ -9,9 +9,9 @@ import {
   filter,
   forEach,
   mergeWith,
-  callRule,
   FileEntry,
-  template
+  template,
+  callRule
 } from '@angular-devkit/schematics';
 
 import {
@@ -66,6 +66,7 @@ import { getWorkspace } from '@schematics/angular/utility/workspace';
 import { Change } from '@schematics/angular/utility/change';
 
 import { PatchNodePackageInstallTask } from '../utility/patch';
+import { isAngularVersionHigherThan } from '../utility/angular-version';
 
 const projectFilesSource = './files/src';
 const workspaceFilesSource = './files';
@@ -161,13 +162,13 @@ function modifyFileRule(path: string, callback: (source: SourceFile) => Change[]
     }
 
     const changes = callback(source);
-
     return applyChanges(host, changes, path);
   };
 }
 
-function updateAppComponent(sourcePath: string, templateOptions: any = {}) {
-  const appMComponentPath = sourcePath + 'app.component.ts';
+// need here fix ?
+function updateAppComponent(host: Tree, sourcePath: string, templateOptions: any = {}) {
+  const appMComponentPath = sourcePath + (isAngularVersionHigherThan(host, 20) ? 'app.ts' : 'app.component.ts');
 
   const importSetter = (importName: string, path: string, alias: string) => {
     return (source: SourceFile) => {
@@ -188,19 +189,23 @@ function updateAppComponent(sourcePath: string, templateOptions: any = {}) {
   return chain(rules);
 }
 
+// need here fix ?
 function getComponentName(host: Tree, sourcePath: string) {
   let name = '';
   let index = 0;
 
-  if (!host.exists(sourcePath + 'app.component.ts')) {
+  if (!host.exists(sourcePath + 'app.component.ts') && !host.exists(sourcePath + 'app.ts')) {
     name = 'app';
   }
 
   while (!name) {
     index++;
     const componentName = `app${index}`;
 
-    if (!host.exists(`${sourcePath}${componentName}.component.ts`)) {
+    if (
+      !host.exists(`${sourcePath}${componentName}.component.ts`)
+      && !host.exists(`${sourcePath}${componentName}.ts`)
+    ) {
       name = componentName;
     }
   }
@@ -270,10 +275,12 @@ function modifyContentByTemplate(
   };
 }
 
-function updateDevextremeConfig(sourcePath: string = '') {
+function updateDevextremeConfig(host: Tree, sourcePath: string = '') {
   const devextremeConfigPath = '/devextreme.json';
+  const postfix = isAngularVersionHigherThan(host, 20) ? 'test' : 'component';
   const templateOptions = {
-    sourcePath
+    sourcePath,
+    postfix
   };
 
   const modifyConfig = (templateContent: string, currentContent: string) => {
@@ -302,6 +309,10 @@ const modifyRouting = (host: Tree, routingFilePath: string) => {
   }
 };
 
+function setPostfix(host: Tree, name: string) {
+  return name + (isAngularVersionHigherThan(host, 20) ? '' : '.component');
+}
+
 export default function(options: any): Rule {
   return async (host: Tree) => {
     const project = await getProjectName(host, options.project);
@@ -315,13 +326,14 @@ export default function(options: any): Rule {
     const override = options.resolveConflicts === 'override';
     const componentName = override ? 'app' : getComponentName(host, appPath);
     const pathToCss = sourcePath?.replace(/\/?(\w)+\/?/g, '../');
+
     const templateOptions = {
-      name: componentName,
+      name: setPostfix(host, componentName),
       layout,
       title,
       strings,
       path: pathToCss,
-      prefix
+      prefix,
     };
 
     const modifyContent = (templateContent: string, currentContent: string, filePath: string) => {
@@ -339,8 +351,8 @@ export default function(options: any): Rule {
 
     const rules = [
       modifyContentByTemplate(sourcePath, projectFilesSource, null, templateOptions, modifyContent),
-      updateDevextremeConfig(sourcePath),
-      updateAppComponent(appPath, templateOptions),
+      updateDevextremeConfig(host, sourcePath),
+      updateAppComponent(host, appPath, templateOptions),
       addBuildThemeScript(),
       () => addCustomThemeStyles(host, options, sourcePath) as any,
       addViewportToBody(sourcePath),
diff --git a/packages/devextreme-schematics/src/add-view/index.ts b/packages/devextreme-schematics/src/add-view/index.ts
@@ -23,8 +23,9 @@ import {
 } from '../utility/routing';
 
 import { getSourceFile } from '../utility/source';
+import { getAngularVersion, isAngularVersionHigherThan } from '../utility/angular-version';
 
-import { strings, basename, normalize, dirname } from '@angular-devkit/core';
+import { strings, basename, normalize, dirname, Path } from '@angular-devkit/core';
 
 import {
   getProjectName,
@@ -106,7 +107,8 @@ 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 path = isAngularVersionHigherThan(host, 20) ? `./pages/${name}/${name}.ts` : `./pages/${name}/${name}.component.ts`;
+      const importChanges = insertImport(source, routingModulePath, componentName, path);
       applyChanges(host, [importChanges], routingModulePath);
     }
     return host;
@@ -137,38 +139,57 @@ function overwriteModuleContent(options: any, path: string, content: string) {
   };
 }
 
-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`;
+function getComponentFileNames(name: string, angularVersion: number) {
+  const baseName = strings.dasherize(basename(normalize(name)));
+  const path = `${dirname(name as Path)}/${baseName}`;
+
+  if (angularVersion >= 20) {
+    return {
+      path,
+      ts: `${path}/${baseName}.ts` as Path,
+      html: `${path}/${baseName}.html` as Path,
+      style: `${path}/${baseName}.scss` as Path
+    };
+  }
+
+  return {
+    path,
+    ts: `${path}/${baseName}.component.ts` as Path,
+    html: `${path}/${baseName}.component.html` as Path,
+    style: `${path}/${baseName}.component.scss` as Path
+  };
+}
+
+function addContentToView(options: any, angularVersion: number) {
+  const { html } = getComponentFileNames(options.name, angularVersion);
+  const title = humanize(strings.dasherize(basename(normalize(options.name))));
   const content = `<h2>${title}</h2>
 <div class="content-block">
     <div class="dx-card responsive-paddings">Put your content here</div>
 </div>
 `;
 
-  return overwriteModuleContent(options, componentPath, content);
+  return overwriteModuleContent(options, html, content);
 }
 
-async function addContentToTS(options: any) {
+async function addContentToTS(options: any, angularVersion: number) {
+  const { ts, html, style } = getComponentFileNames(options.name, angularVersion);
   const name = strings.dasherize(basename(normalize(options.name)));
-  const path = `${dirname(options.name)}/${name}`;
-  const componentPath = `${path}/${name}.component.ts`;
+  const componentName = strings.classify(basename(normalize(name)));
   const content = `import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-${name}',
-  templateUrl: './${name}.component.html',
-  styleUrl: './${name}.component.css',
+  templateUrl: './${basename(html)}',
+  styleUrl: './${basename(style)}',
   standalone: true
 })
-export class ${strings.classify(basename(normalize(name)))}Component {
+export class ${componentName}Component {
 
 }
 `;
 
-  return overwriteModuleContent(options, componentPath, content);
+  return overwriteModuleContent(options, ts, content);
 }
 
 export default function(options: any): Rule {
@@ -177,6 +198,7 @@ export default function(options: any): Rule {
     const project = await getProjectName(host, options.project);
     const module = getModuleName(addRoute, options.module);
     const name = getPathForView(options.name);
+    const angularVersion = getAngularVersion(host);
 
     const rules = [externalSchematic('../node_modules/@schematics/angular', 'component', {
         name,
@@ -187,8 +209,8 @@ export default function(options: any): Rule {
         prefix: options.prefix,
         standalone: true
       }),
-      addContentToView({ name, project }) as any,
-      addContentToTS({ name, project }) as any
+      addContentToView({ name, project }, angularVersion) as any,
+      addContentToTS({ name, project }, angularVersion) as any
     ];
 
     if (addRoute) {
diff --git a/packages/devextreme-schematics/src/install/index.ts b/packages/devextreme-schematics/src/install/index.ts
@@ -19,7 +19,6 @@ import { getProjectName } from '../utility/project';
 import { PatchNodePackageInstallTask } from '../utility/patch';
 
 export default function(options: any): Rule {
-
   return chain([
     (host: Tree) => addDevExtremeDependency(host, { dxversion: options.dxversion }),
     (host: Tree) => addDevExtremeCSS(host, { project: options.project }),
diff --git a/packages/devextreme-schematics/src/utility/angular-version.ts b/packages/devextreme-schematics/src/utility/angular-version.ts
@@ -0,0 +1,18 @@
+import { Tree } from '@angular-devkit/schematics';
+import { SemVer } from 'semver';
+
+export function getAngularVersion(host: Tree): number {
+  const packageJson = JSON.parse(host.read('package.json')?.toString() || '{}');
+  const angularCore = packageJson.dependencies?.['@angular/core'];
+
+  if (angularCore) {
+    const version = new SemVer(angularCore.replace(/\^|\~/g, ''));
+    return version.major;
+  }
+
+  throw new Error('Angular version not found');
+}
+
+export function isAngularVersionHigherThan(host: Tree, version: number): boolean {
+  return getAngularVersion(host) >= version;
+}
diff --git a/packages/devextreme-schematics/src/utility/patch.ts b/packages/devextreme-schematics/src/utility/patch.ts
@@ -1,7 +1,16 @@
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 
 export class PatchNodePackageInstallTask extends NodePackageInstallTask {
-    toConfiguration = (): any => {
+    // TODO: remove this patch before merge
+    constructor() {
+        super({
+            packageManager: 'npm',
+            packageName: '--legacy-peer-deps',
+            allowScripts: true,
+        });
+    }
+
+    toConfiguration(): any {
         const rootConfigurations = super.toConfiguration();
         const customOptions = Object.assign({}, rootConfigurations.options, { allowScripts: true });
 
