Use standalone in Angular app

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

@@ -63,6 +63,7 @@ function localPackageExists(packageName) {
 
 const hasSutableNgCli = async() => {
     const localVersion = ngVersion.getLocalNgVersion();
+
     if(!localVersion) {
         return false;
     }
@@ -105,7 +106,7 @@ const create = async(appName, options) => {
         '--routing=false',
         '--skip-tests=true',
         '--skip-install=true',
-        '--standalone=false',
+        '--standalone=true',
         '--ssr=false'
     ];
 
@@ -150,9 +151,9 @@ const changeMainTs = (appPath) => {
     moduleWorker.insertImport(filePath, 'devextreme/ui/themes', 'themes', true);
 
     const fileContent = fs.readFileSync(filePath).toString();
-    const bootstrapPattern = /platformBrowser(?:Dynamic)?\(\)\.bootstrapModule\(\s*AppModule\s*(?:,\s*\{[^}]*\})?\s*\)/;
+    const bootstrapPattern = /bootstrapApplication\([^)]+\)/;
     const firstChaptStr = fileContent.match(bootstrapPattern)[0];
-    const lastChaptStr = '.catch(err => console.error(err));';
+    const lastChaptStr = '.catch((err) => console.error(err));';
 
     fs.writeFileSync(
         filePath,

packages/devextreme-cli/testing/app-template.test.shared.js

@@ -31,7 +31,7 @@ module.exports = (env, { port = 8080, urls = {} } = {}) => {
                         let browser;
                         let page;
 
-                        const getPageURL = (name) => `${appUrl}${(env.engine.indexOf('nextjs') !== 0 ? '#/' : '')}${pageUrls[name]}`;
+                        const getPageURL = (name) => `${appUrl}${(!env.engine.startsWith('nextjs') ? '#/' : '')}${pageUrls[name]}`;
 
                         beforeAll(async() => {
                             browser = await getBrowser();
@@ -280,11 +280,12 @@ module.exports = (env, { port = 8080, urls = {} } = {}) => {
                                     await page.waitForSelector('.create-account-form');
 
                                     await hideScroll();
-
                                     await page.waitForTimeout(3000);
                                     const image = await takeScreenshot();
 
-                                    compareSnapshot(image, 'create-account');
+                                    compareSnapshot(image, 'create-account', {
+                                        threshold: 0.05
+                                    });
                                 });
 
                                 it('Reset password page', async() => {

packages/devextreme-cli/testing/env.angular.js

@@ -11,8 +11,8 @@ const sandboxPath = path.join(process.cwd(), './testing/sandbox/angular');
 const appPath = path.join(sandboxPath, appName);
 const schematicsDirectory = '../../../../devextreme-schematics';
 const schematicsPath = path.join(sandboxPath, schematicsDirectory);
-const routingFilePath = path.join(appPath, 'src/app/app-routing.module.ts');
-const appComponentPath = path.join(appPath, 'src/app/app.component.html');
+const appComponentTemplatePath = path.join(appPath, 'src/app/app.component.html');
+const appComponentPath = path.join(appPath, 'src/app/app.component.ts');
 
 async function prepareSchematics() {
     await packageManager.runInstall({
@@ -60,16 +60,28 @@ exports.createApp = async(depsVersionTag) => {
         cwd: appPath,
         forceNoCmd: true
     });
-
-    const data = fs.readFileSync(routingFilePath, 'utf8');
-    const result = data.replace('RouterModule.forRoot(routes)', 'RouterModule.forRoot(routes, {useHash: true})');
-    fs.writeFileSync(routingFilePath, result, 'utf8');
 };
 
 exports.setLayout = (layoutName) => {
-    const regexToFind = /app-side-nav-\w+-toolbar/g;
-    const newSubStr = `app-${layoutName}`;
-    const data = fs.readFileSync(appComponentPath, 'utf8');
-    const result = data.replace(regexToFind, newSubStr);
-    fs.writeFileSync(appComponentPath, result, 'utf8');
+    const layoutClassName = layoutName === 'side-nav-outer-toolbar'
+        ? 'SideNavOuterToolbarComponent'
+        : 'SideNavInnerToolbarComponent';
+
+    [
+        {
+            filePath: appComponentTemplatePath,
+            regexp: /app-side-nav-\w+-toolbar/g,
+            replacement: `app-${layoutName}`,
+        },
+        {
+            filePath: appComponentPath,
+            regexp: /SideNav\w+ToolbarComponent/,
+            replacement: layoutClassName,
+        }
+    ].forEach(({ filePath, regexp, replacement }) => {
+        const data = fs.readFileSync(filePath, 'utf8');
+        const result = data.replace(regexp, replacement);
+        fs.writeFileSync(filePath, result, 'utf8');
+    });
+
 };

packages/devextreme-schematics/src/add-layout/files/src/app/__name__.component.ts

@@ -1,11 +1,27 @@
 import { Component, HostBinding } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, RouterOutlet } from '@angular/router';
 import { AuthService, ScreenService, AppInfoService } from './shared/services';
+import { DxHttpModule } from 'devextreme-angular/http';
+import { FooterComponent } from './shared/components';
+import { UnauthenticatedContentComponent } from './unauthenticated-content';
+
 
 @Component({
   selector: '<%= prefix %>-root',
   templateUrl: './<%= name %>.component.html',
   styleUrls: ['./<%= name %>.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [
+    RouterModule,
+    RouterOutlet,
+    CommonModule,
+    DxHttpModule,
+    SideNavToolbarComponent,
+    FooterComponent,
+    UnauthenticatedContentComponent,
+  ],
+  providers: []
 })
 export class <%= strings.classify(name) %>Component  {
   @HostBinding('class') get getClass() {

packages/devextreme-schematics/src/add-layout/files/src/app/app.config.ts

@@ -0,0 +1,20 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter, withHashLocation } from '@angular/router';
+import { routes } from './app.routes';
+import {
+    AppInfoService,
+    AuthGuardService,
+    AuthService,
+    ScreenService,
+} from './shared/services';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes, withHashLocation()),
+    AuthGuardService,
+    AuthService,
+    ScreenService,
+    AppInfoService,
+  ]
+};

packages/devextreme-schematics/src/add-layout/files/src/app/app-routing.module.ts → packages/devextreme-schematics/src/add-layout/files/src/app/app.routes.ts

@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 import { LoginFormComponent, ResetPasswordFormComponent, CreateAccountFormComponent, ChangePasswordFormComponent } from './shared/components';
 import { AuthGuardService } from './shared/services';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: 'login-form',
     component: LoginFormComponent,
@@ -25,10 +24,3 @@ const routes: Routes = [
     canActivate: [ AuthGuardService ]
   }
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true })],
-  providers: [AuthGuardService],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, NgModule, Input, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { CommonModule } from '@angular/common';
 
@@ -7,15 +7,23 @@ import { DxDrawerModule, DxDrawerTypes } from 'devextreme-angular/ui/drawer';
 import { DxScrollViewModule, DxScrollViewComponent } from 'devextreme-angular/ui/scroll-view';
 import { DxToolbarModule, DxToolbarTypes } from 'devextreme-angular/ui/toolbar';
 
-import { SideNavigationMenuModule, HeaderModule } from '../../shared/components';
+import { SideNavigationMenuComponent, HeaderComponent } from '../../shared/components';
 import { ScreenService } from '../../shared/services';
 import { ThemeService } from '../../shared/services/theme.service';
 
 @Component({
   selector: 'app-side-nav-inner-toolbar',
   templateUrl: './side-nav-inner-toolbar.component.html',
   styleUrls: ['./side-nav-inner-toolbar.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [
+    SideNavigationMenuComponent,
+    DxDrawerModule,
+    HeaderComponent,
+    DxToolbarModule,
+    DxScrollViewModule,
+    CommonModule,
+  ]
 })
 export class SideNavInnerToolbarComponent implements OnInit {
   @ViewChild(DxScrollViewComponent, { static: true }) scrollView!: DxScrollViewComponent;
@@ -105,10 +113,3 @@ export class SideNavInnerToolbarComponent implements OnInit {
     }
   }
 }
-
-@NgModule({
-  imports: [ SideNavigationMenuModule, DxDrawerModule, HeaderModule, DxToolbarModule, DxScrollViewModule, CommonModule ],
-  exports: [ SideNavInnerToolbarComponent ],
-  declarations: [ SideNavInnerToolbarComponent ]
-})
-export class SideNavInnerToolbarModule { }

packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.component.ts

@@ -1,19 +1,21 @@
-import { Component, OnInit, NgModule, Input, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 
+
 import { DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { DxDrawerModule, DxDrawerTypes } from 'devextreme-angular/ui/drawer';
 import { DxScrollViewModule, DxScrollViewComponent } from 'devextreme-angular/ui/scroll-view';
 
-import { SideNavigationMenuModule, HeaderModule } from '../../shared/components';
+import { SideNavigationMenuComponent, HeaderComponent } from '../../shared/components';
 import { ScreenService, ThemeService } from '../../shared/services';
 
 @Component({
   selector: 'app-side-nav-outer-toolbar',
   templateUrl: './side-nav-outer-toolbar.component.html',
   styleUrls: ['./side-nav-outer-toolbar.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [ CommonModule, SideNavigationMenuComponent, DxDrawerModule, HeaderComponent, DxScrollViewModule ],
 })
 export class SideNavOuterToolbarComponent implements OnInit {
   @ViewChild(DxScrollViewComponent, { static: true }) scrollView!: DxScrollViewComponent;
@@ -98,10 +100,3 @@ export class SideNavOuterToolbarComponent implements OnInit {
     }
   }
 }
-
-@NgModule({
-  imports: [ SideNavigationMenuModule, DxDrawerModule, HeaderModule, DxScrollViewModule, CommonModule ],
-  exports: [ SideNavOuterToolbarComponent ],
-  declarations: [ SideNavOuterToolbarComponent ]
-})
-export class SideNavOuterToolbarModule { }

packages/devextreme-schematics/src/add-layout/files/src/app/layouts/single-card/single-card.component.ts

@@ -1,12 +1,13 @@
-import { Component, NgModule, Input} from '@angular/core';
+import { Component, Input} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DxScrollViewModule }  from 'devextreme-angular/ui/scroll-view';
 
 @Component({
   selector: 'app-single-card',
   templateUrl: './single-card.component.html',
   styleUrls: ['./single-card.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [ CommonModule, DxScrollViewModule ],
 })
 export class SingleCardComponent {
   @Input()
@@ -17,12 +18,3 @@ export class SingleCardComponent {
 
   constructor() { }
 }
-
-@NgModule({
-  imports: [ CommonModule, DxScrollViewModule ],
-  exports: [ SingleCardComponent ],
-  declarations: [ SingleCardComponent ]
-})
-export class SingleCardModule {
-
-}

packages/devextreme-schematics/src/add-layout/files/src/app/not-authorized-container.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
-import { Component, NgModule } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { SingleCardModule } from './layouts';
+import { SingleCardComponent } from './layouts';
 import { Router } from '@angular/router';
 
 @Component({
@@ -17,7 +17,12 @@ import { Router } from '@angular/router';
       height: 100%;
     }
   `],
-  standalone: false
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    SingleCardComponent,
+  ]
 })
 export class NotAuthorizedContainerComponent {
 
@@ -42,13 +47,3 @@ export class NotAuthorizedContainerComponent {
     }
   }
 }
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    SingleCardModule,
-  ],
-  declarations: [NotAuthorizedContainerComponent],
-  exports: [NotAuthorizedContainerComponent]
-})
-export class NotAuthorizedContainerModule { }

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/change-password-form/change-password-form.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, NgModule, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { ValidationCallbackData } from 'devextreme-angular/common';
 import { DxFormModule } from 'devextreme-angular/ui/form';
@@ -11,7 +11,13 @@ import { AuthService } from '../../services';
 @Component({
   selector: 'app-change-passsword-form',
   templateUrl: './change-password-form.component.html',
-  standalone: false
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    DxFormModule,
+    DxLoadIndicatorModule,
+  ]
 })
 export class ChangePasswordFormComponent implements OnInit {
   loading = false;
@@ -45,14 +51,3 @@ export class ChangePasswordFormComponent implements OnInit {
     return e.value === this.formData.password;
   }
 }
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    DxFormModule,
-    DxLoadIndicatorModule
-  ],
-  declarations: [ ChangePasswordFormComponent ],
-  exports: [ ChangePasswordFormComponent ]
-})
-export class ChangePasswordFormModule { }

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, NgModule } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { ValidationCallbackData } from 'devextreme-angular/common';
 import { DxFormModule } from 'devextreme-angular/ui/form';
@@ -12,7 +12,13 @@ import { AuthService } from '../../services';
   selector: 'app-create-account-form',
   templateUrl: './create-account-form.component.html',
   styleUrls: ['./create-account-form.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    DxFormModule,
+    DxLoadIndicatorModule,
+  ]
 })
 export class CreateAccountFormComponent {
   loading = false;
@@ -39,14 +45,3 @@ export class CreateAccountFormComponent {
     return e.value === this.formData.password;
   }
 }
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    DxFormModule,
-    DxLoadIndicatorModule
-  ],
-  declarations: [ CreateAccountFormComponent ],
-  exports: [ CreateAccountFormComponent ]
-})
-export class CreateAccountFormModule { }