Fix for CLI: ng app works incorrectly with ng 20

packages/devextreme-cli/src/applications/application.angular.js

@@ -84,6 +84,7 @@ const bumpAngular = (appPath, versionTag) => {
             for(const depName in section) {
                 section[depName] = depName.startsWith('@angular') ? versionTag : section[depName];
             }
+            return section;
         };
 
         return {

packages/devextreme-schematics/src/add-layout/files/src/app/__name__.component.ts → 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,
@@ -23,7 +23,7 @@ import { UnauthenticatedContentComponent } from './unauthenticated-content';
   ],
   providers: []
 })
-export class <%= strings.classify(name) %>Component  {
+export class <%= strings.classify(name) %> {
   @HostBinding('class') get getClass() {
     const sizeClassName = Object.keys(this.screen.sizes).filter(cl => this.screen.sizes[cl]).join(' ');
     return `${sizeClassName} app` ;

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

@@ -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';
@@ -166,8 +167,8 @@ function modifyFileRule(path: string, callback: (source: SourceFile) => Change[]
   };
 }
 
-function updateAppComponent(sourcePath: string, templateOptions: any = {}) {
-  const appMComponentPath = sourcePath + 'app.component.ts';
+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) => {
@@ -192,15 +193,18 @@ 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;
     }
   }
@@ -302,6 +306,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,8 +323,9 @@ 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,
@@ -340,7 +349,7 @@ export default function(options: any): Rule {
     const rules = [
       modifyContentByTemplate(sourcePath, projectFilesSource, null, templateOptions, modifyContent),
       updateDevextremeConfig(sourcePath),
-      updateAppComponent(appPath, templateOptions),
+      updateAppComponent(host, appPath, templateOptions),
       addBuildThemeScript(),
       () => addCustomThemeStyles(host, options, sourcePath) as any,
       addViewportToBody(sourcePath),

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;
+}