diff --git a/packages/devextreme-cli/src/applications/application.angular.js b/packages/devextreme-cli/src/applications/application.angular.js
index 8ac88b646..99a638992 100644
--- a/packages/devextreme-cli/src/applications/application.angular.js
+++ b/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,
diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-material-large-create-account-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-material-large-create-account-snap.png
index d103c4de6..b62c30b2a 100644
Binary files a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-material-large-create-account-snap.png and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-material-large-create-account-snap.png differ
diff --git a/packages/devextreme-cli/testing/app-template.test.shared.js b/packages/devextreme-cli/testing/app-template.test.shared.js
index c7b634120..e5adf5218 100644
--- a/packages/devextreme-cli/testing/app-template.test.shared.js
+++ b/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() => {
diff --git a/packages/devextreme-cli/testing/env.angular.js b/packages/devextreme-cli/testing/env.angular.js
index 50df735a3..a6b606a9c 100644
--- a/packages/devextreme-cli/testing/env.angular.js
+++ b/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');
+    });
+
 };
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/__name__.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/__name__.component.ts
index bfdd46407..a3c487677 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/__name__.component.ts
+++ b/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() {
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/app.config.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/app.config.ts
new file mode 100644
index 000000000..9e771f76a
--- /dev/null
+++ b/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,
+  ]
+};
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/app-routing.module.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/app.routes.ts
similarity index 69%
rename from packages/devextreme-schematics/src/add-layout/files/src/app/app-routing.module.ts
rename to packages/devextreme-schematics/src/add-layout/files/src/app/app.routes.ts
index fda893e01..8ffcaba60 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/app-routing.module.ts
+++ b/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 { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.ts
index fb35962e1..defb82861 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.ts
+++ b/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,7 +7,7 @@ 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';
 
@@ -15,7 +15,15 @@ import { ThemeService } from '../../shared/services/theme.service';
   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 { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.component.ts
index 853b6bb84..75f70eca9 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.component.ts
+++ b/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 { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/single-card/single-card.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/single-card/single-card.component.ts
index d2c611dde..9591605c3 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/single-card/single-card.component.ts
+++ b/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/single-card/single-card.component.ts
@@ -1,4 +1,4 @@
-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';
 
@@ -6,7 +6,8 @@ import { DxScrollViewModule }  from 'devextreme-angular/ui/scroll-view';
   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 {
-  
-}
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/not-authorized-container.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/not-authorized-container.ts
index 83e05aaf9..a436cba00 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/not-authorized-container.ts
+++ b/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 { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/change-password-form/change-password-form.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/change-password-form/change-password-form.component.ts
index 68e233b36..b262481f9 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/change-password-form/change-password-form.component.ts
+++ b/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 { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.ts
index 47929ae70..f2e49fbde 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.ts
+++ b/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 { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/footer/footer.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/footer/footer.component.ts
index 75905ee7e..8ae7613ec 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/footer/footer.component.ts
+++ b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/footer/footer.component.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-footer',
@@ -6,15 +6,9 @@ import { Component, NgModule } from '@angular/core';
     <footer><ng-content></ng-content></footer>
   `,
   styleUrls: ['./footer.component.scss'],
-  standalone: false
+  standalone: true
 })
 
 export class FooterComponent {
 
 }
-
-@NgModule({
-  declarations: [ FooterComponent ],
-  exports: [ FooterComponent ]
-})
-export class FooterModule { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/header/header.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/header/header.component.ts
index a1a264731..6f88303e5 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/header/header.component.ts
+++ b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/header/header.component.ts
@@ -1,18 +1,25 @@
-import { Component, NgModule, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
-
-import { AuthService, IUser } from '../../services';
-import { UserPanelModule } from '../user-panel/user-panel.component';
 import { DxButtonModule } from 'devextreme-angular/ui/button';
 import { DxToolbarModule } from 'devextreme-angular/ui/toolbar';
 
-import { Router } from '@angular/router';
-import {ThemeSwitcherModule} from "../theme-switcher/theme-switcher.component";
+import { AuthService, IUser } from '../../services';
+import { UserPanelComponent } from '../user-panel/user-panel.component';
+import { ThemeSwitcherComponent } from '../theme-switcher/theme-switcher.component';
+
 @Component({
   selector: 'app-header',
   templateUrl: 'header.component.html',
   styleUrls: ['./header.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [
+    CommonModule,
+    DxButtonModule,
+    UserPanelComponent,
+    DxToolbarModule,
+    ThemeSwitcherComponent,
+  ]
 })
 
 export class HeaderComponent implements OnInit {
@@ -52,16 +59,3 @@ export class HeaderComponent implements OnInit {
     this.menuToggle.emit();
   }
 }
-
-@NgModule({
-  imports: [
-    CommonModule,
-    DxButtonModule,
-    UserPanelModule,
-    DxToolbarModule,
-    ThemeSwitcherModule,
-  ],
-  declarations: [ HeaderComponent ],
-  exports: [ HeaderComponent ]
-})
-export class HeaderModule { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/login-form/login-form.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/login-form/login-form.component.ts
index bad127617..142a7e92b 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/login-form/login-form.component.ts
+++ b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/login-form/login-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 { DxFormModule } from 'devextreme-angular/ui/form';
 import { DxButtonModule } from 'devextreme-angular/ui/button';
@@ -12,7 +12,14 @@ import { AuthService } from '../../services';
   selector: 'app-login-form',
   templateUrl: './login-form.component.html',
   styleUrls: ['./login-form.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    DxFormModule,
+    DxButtonModule,
+    DxLoadIndicatorModule,
+  ]
 })
 export class LoginFormComponent {
   loading = false;
@@ -36,15 +43,3 @@ export class LoginFormComponent {
     this.router.navigate(['/create-account']);
   }
 }
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    DxFormModule,
-    DxButtonModule,
-    DxLoadIndicatorModule
-  ],
-  declarations: [ LoginFormComponent ],
-  exports: [ LoginFormComponent ]
-})
-export class LoginFormModule { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/reset-password-form/reset-password-form.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/reset-password-form/reset-password-form.component.ts
index 2edf99036..61765c29b 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/reset-password-form/reset-password-form.component.ts
+++ b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/reset-password-form/reset-password-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 { DxFormModule } from 'devextreme-angular/ui/form';
 import { DxLoadIndicatorModule } from 'devextreme-angular/ui/load-indicator';
@@ -12,7 +12,13 @@ const notificationText = 'We\'ve sent a link to reset your password. Check your
   selector: 'app-reset-password-form',
   templateUrl: './reset-password-form.component.html',
   styleUrls: ['./reset-password-form.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    DxFormModule,
+    DxLoadIndicatorModule,
+  ]
 })
 export class ResetPasswordFormComponent {
   loading = false;
@@ -36,14 +42,3 @@ export class ResetPasswordFormComponent {
     }
   }
 }
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    DxFormModule,
-    DxLoadIndicatorModule
-  ],
-  declarations: [ResetPasswordFormComponent],
-  exports: [ResetPasswordFormComponent]
-})
-export class ResetPasswordFormModule { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts
index 79d1b94a0..bd4c24a6b 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts
+++ b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule, Output, Input, EventEmitter, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { Component, Output, Input, EventEmitter, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
 import { DxTreeViewModule, DxTreeViewComponent, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { navigation } from '../../../app-navigation';
 
@@ -8,7 +8,8 @@ import * as events from 'devextreme-angular/common/core/events';
   selector: 'app-side-navigation-menu',
   templateUrl: './side-navigation-menu.component.html',
   styleUrls: ['./side-navigation-menu.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [ DxTreeViewModule ]
 })
 export class SideNavigationMenuComponent implements AfterViewInit, OnDestroy {
   @ViewChild(DxTreeViewComponent, { static: true })
@@ -80,10 +81,3 @@ export class SideNavigationMenuComponent implements AfterViewInit, OnDestroy {
     events.off(this.elementRef.nativeElement, 'dxclick');
   }
 }
-
-@NgModule({
-  imports: [ DxTreeViewModule ],
-  declarations: [ SideNavigationMenuComponent ],
-  exports: [ SideNavigationMenuComponent ]
-})
-export class SideNavigationMenuModule { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/theme-switcher/theme-switcher.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/theme-switcher/theme-switcher.component.ts
index 5723429c7..1291fd1d0 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/theme-switcher/theme-switcher.component.ts
+++ b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/theme-switcher/theme-switcher.component.ts
@@ -1,6 +1,4 @@
-import {
-  Component, NgModule,
-} from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DxButtonModule } from 'devextreme-angular';
 import { ThemeService } from '../../services/theme.service';
@@ -15,7 +13,8 @@ import { ThemeService } from '../../services/theme.service';
       (onClick)="onButtonClick()"
     ></dx-button>`,
   styleUrls: [],
-  standalone: false
+  standalone: true,
+  imports: [CommonModule, DxButtonModule],
 })
 export class ThemeSwitcherComponent {
   constructor(public themeService: ThemeService) {}
@@ -24,10 +23,3 @@ export class ThemeSwitcherComponent {
     this.themeService.switchTheme();
   }
 }
-
-@NgModule({
-  imports: [CommonModule, DxButtonModule],
-  declarations: [ThemeSwitcherComponent],
-  exports: [ThemeSwitcherComponent],
-})
-export class ThemeSwitcherModule { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/user-panel/user-panel.component.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/user-panel/user-panel.component.ts
index 5d3cf123a..09c17ba0b 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/user-panel/user-panel.component.ts
+++ b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/user-panel/user-panel.component.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { DxListModule } from 'devextreme-angular/ui/list';
@@ -9,9 +9,14 @@ import { DxContextMenuModule } from 'devextreme-angular/ui/context-menu';
   selector: 'app-user-panel',
   templateUrl: 'user-panel.component.html',
   styleUrls: ['./user-panel.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [
+    DxListModule,
+    DxContextMenuModule,
+    DxDropDownButtonModule,
+    CommonModule
+  ]
 })
-
 export class UserPanelComponent {
   @Input()
   menuItems: any;
@@ -19,15 +24,3 @@ export class UserPanelComponent {
   @Input()
   menuMode = 'context';
 }
-
-@NgModule({
-  imports: [
-    DxListModule,
-    DxContextMenuModule,
-    DxDropDownButtonModule,
-    CommonModule
-  ],
-  declarations: [ UserPanelComponent ],
-  exports: [ UserPanelComponent ]
-})
-export class UserPanelModule { }
diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/unauthenticated-content.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/unauthenticated-content.ts
index b4b38b2b4..99e2c495c 100644
--- a/packages/devextreme-schematics/src/add-layout/files/src/app/unauthenticated-content.ts
+++ b/packages/devextreme-schematics/src/add-layout/files/src/app/unauthenticated-content.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 UnauthenticatedContentComponent {
 
@@ -42,13 +47,3 @@ export class UnauthenticatedContentComponent {
     }
   }
 }
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    SingleCardModule,
-  ],
-  declarations: [UnauthenticatedContentComponent],
-  exports: [UnauthenticatedContentComponent]
-})
-export class UnauthenticatedContentModule { }
diff --git a/packages/devextreme-schematics/src/add-layout/index.ts b/packages/devextreme-schematics/src/add-layout/index.ts
index c2ecd189d..56eb1e558 100644
--- a/packages/devextreme-schematics/src/add-layout/index.ts
+++ b/packages/devextreme-schematics/src/add-layout/index.ts
@@ -60,9 +60,7 @@ import {
   findRoutesInSource
 } from '../utility/routing';
 
-import {
-  addImportToModule, addProviderToModule, insertImport
-} from '@schematics/angular/utility/ast-utils';
+import { insertImport } from '@schematics/angular/utility/ast-utils';
 
 import { getWorkspace } from '@schematics/angular/utility/workspace';
 import { Change } from '@schematics/angular/utility/change';
@@ -168,41 +166,25 @@ function modifyFileRule(path: string, callback: (source: SourceFile) => Change[]
   };
 }
 
-function updateAppModule(host: Tree, sourcePath: string) {
-  const appModulePath = sourcePath + 'app.module.ts';
+function updateAppComponent(sourcePath: string, templateOptions: any = {}) {
+  const appMComponentPath = sourcePath + 'app.component.ts';
 
-  const importSetter = (importName: string, path: string) => {
+  const importSetter = (importName: string, path: string, alias: string) => {
     return (source: SourceFile) => {
-      return addImportToModule(source, appModulePath, importName, path);
-    };
-  };
-
-  const providerSetter = (importName: string, path: string) => {
-    return (source: SourceFile) => {
-      return addProviderToModule(source, appModulePath, importName, path);
+      return [insertImport(source, appMComponentPath, importName, path, false, alias)];
     };
   };
 
   const rules = [
-    modifyFileRule(appModulePath, importSetter('DxHttpModule', 'devextreme-angular/http')),
-    modifyFileRule(appModulePath, importSetter('SideNavOuterToolbarModule', './layouts')),
-    modifyFileRule(appModulePath, importSetter('SideNavInnerToolbarModule', './layouts')),
-    modifyFileRule(appModulePath, importSetter('SingleCardModule', './layouts')),
-    modifyFileRule(appModulePath, importSetter('FooterModule', './shared/components')),
-    modifyFileRule(appModulePath, importSetter('ResetPasswordFormModule', './shared/components')),
-    modifyFileRule(appModulePath, importSetter('CreateAccountFormModule', './shared/components')),
-    modifyFileRule(appModulePath, importSetter('ChangePasswordFormModule', './shared/components')),
-    modifyFileRule(appModulePath, importSetter('LoginFormModule', './shared/components')),
-    modifyFileRule(appModulePath, providerSetter('AuthService', './shared/services')),
-    modifyFileRule(appModulePath, providerSetter('ScreenService', './shared/services')),
-    modifyFileRule(appModulePath, providerSetter('AppInfoService', './shared/services')),
-    modifyFileRule(appModulePath, importSetter('UnauthenticatedContentModule', './unauthenticated-content')),
+    modifyFileRule(appMComponentPath, importSetter(
+      templateOptions.layout === 'side-nav-outer-toolbar'
+        ? 'SideNavOuterToolbarComponent'
+        : 'SideNavInnerToolbarComponent',
+      './layouts',
+      'SideNavToolbarComponent',
+      )),
   ];
 
-  if (!hasRoutingModule(host, sourcePath)) {
-    rules.push(modifyFileRule(appModulePath, importSetter('AppRoutingModule', './app-routing.module')));
-  }
-
   return chain(rules);
 }
 
@@ -226,8 +208,8 @@ function getComponentName(host: Tree, sourcePath: string) {
   return name;
 }
 
-function hasRoutingModule(host: Tree, sourcePath: string) {
-  return host.exists(sourcePath + 'app-routing.module.ts');
+function hasRouting(host: Tree, sourcePath: string) {
+  return host.exists(sourcePath + 'app.routes.ts');
 }
 
 function addPackagesToDependency(globalNgCliVersion: string) {
@@ -306,18 +288,17 @@ function updateDevextremeConfig(sourcePath: string = '') {
   return modifyContentByTemplate('./', workspaceFilesSource, devextremeConfigPath, templateOptions, modifyConfig);
 }
 
-const modifyRoutingModule = (host: Tree, routingModulePath: string) => {
+const modifyRouting = (host: Tree, routingFilePath: string) => {
   // TODO: Try to use the isolated host to generate the result string
-  let source = getSourceFile(host, routingModulePath)!;
-  const importChange = insertImport(source, routingModulePath, 'LoginFormComponent', './shared/components');
-  const providerChanges = addProviderToModule(source, routingModulePath, 'AuthGuardService', './shared/services');
-  applyChanges(host, [ importChange, ...providerChanges], routingModulePath);
+  let source = getSourceFile(host, routingFilePath)!;
+  const importChange = insertImport(source, routingFilePath, 'LoginFormComponent', './shared/components');
+  applyChanges(host, [ importChange ], routingFilePath);
 
-  source = getSourceFile(host, routingModulePath)!;
+  source = getSourceFile(host, routingFilePath)!;
   const routes = findRoutesInSource(source)!;
   if (!hasComponentInRoutes(routes, 'login-form')) {
     const loginFormRoute = getRoute('login-form');
-    insertItemToArray(host, routingModulePath, routes, loginFormRoute);
+    insertItemToArray(host, routingFilePath, routes, loginFormRoute);
   }
 };
 
@@ -348,8 +329,8 @@ export default function(options: any): Rule {
         return `${currentContent}\n${templateContent}`;
       }
 
-      if (basename(filePath) === 'app-routing.module.ts' && hasRoutingModule(host, appPath)) {
-        modifyRoutingModule(host, filePath);
+      if (basename(filePath) === 'app.routes.ts' && hasRouting(host, appPath)) {
+        modifyRouting(host, filePath);
         return currentContent;
       }
 
@@ -359,7 +340,7 @@ export default function(options: any): Rule {
     const rules = [
       modifyContentByTemplate(sourcePath, projectFilesSource, null, templateOptions, modifyContent),
       updateDevextremeConfig(sourcePath),
-      updateAppModule(host, appPath),
+      updateAppComponent(appPath, templateOptions),
       addBuildThemeScript(),
       () => addCustomThemeStyles(host, options, sourcePath) as any,
       addViewportToBody(sourcePath),
diff --git a/packages/devextreme-schematics/src/add-layout/index_spec.ts b/packages/devextreme-schematics/src/add-layout/index_spec.ts
index c7a6868d5..fcb8ad350 100644
--- a/packages/devextreme-schematics/src/add-layout/index_spec.ts
+++ b/packages/devextreme-schematics/src/add-layout/index_spec.ts
@@ -101,25 +101,17 @@ describe('layout', () => {
     expect(styles[3]).toBe('src/themes/generated/theme.additional.dark.css');
     expect(styles[4]).toBe('src/themes/generated/theme.additional.css');
 
-    const moduleContent = tree.readContent('/src/app/app.module.ts');
-    expect(moduleContent).toContain('import { DxHttpModule }');
-    expect(moduleContent)
-      .toContain('import { SideNavOuterToolbarModule, SideNavInnerToolbarModule, SingleCardModule }');
-    expect(moduleContent)
-      .toContain(`import { AuthService, ScreenService, AppInfoService } from './shared/services';`);
-    expect(moduleContent).toContain('import { AppRoutingModule }');
-    expect(moduleContent)
-      .toContain('import { FooterModule, ' +
-      'ResetPasswordFormModule, ' +
-      'CreateAccountFormModule, ' +
-      'ChangePasswordFormModule, ' +
-      'LoginFormModule }');
-
     const appContent = tree.readContent('/src/app/app.component.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('selector: \'app-root\',');
-    expect(appContent).toContain(`import { AuthService, ScreenService, AppInfoService } from './shared/services';`);
 
     const navigationMenu = tree.readContent(
       '/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts');
@@ -244,26 +236,14 @@ describe('layout', () => {
   });
 
   it('should add routing to layout', async () => {
-    let newAppTree = await schematicRunner.runSchematic('workspace', workspaceOptions);
-
-    appOptions.routing = false;
-    newAppTree = await schematicRunner.runSchematic(
-      'application', appOptions, newAppTree);
-
     const runner = new SchematicTestRunner('schematics', collectionPath);
     const tree = await runner.runSchematic('add-layout', options, appTree);
 
-    expect(tree.files).toContain('/src/app/app-routing.module.ts');
-    const moduleContent = tree.readContent('/src/app/app-routing.module.ts');
-    expect(moduleContent)
-      .toMatch(/imports:\s\[RouterModule\.forRoot\(routes, { useHash: true }\)\],/);
-
-    expect(moduleContent)
-      .toContain(`{
-    path: 'login-form',
-    component: LoginFormComponent,
-    canActivate: [ AuthGuardService ]
-  }`);
+    expect(tree.files).toContain('/src/app/app.routes.ts');
+    const routesContent = tree.readContent('/src/app/app.routes.ts');
+
+    expect(routesContent)
+      .toContain(`{\n    path: 'login-form',\n    component: LoginFormComponent,\n    canActivate: [ AuthGuardService ]\n  },`);
   });
 
   it('should use selected layout', async () => {
diff --git a/packages/devextreme-schematics/src/add-sample-views/files/pages/profile/profile.component.ts b/packages/devextreme-schematics/src/add-sample-views/files/pages/profile/profile.component.ts
index 2d3014917..708ffe805 100644
--- a/packages/devextreme-schematics/src/add-sample-views/files/pages/profile/profile.component.ts
+++ b/packages/devextreme-schematics/src/add-sample-views/files/pages/profile/profile.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { DxFormModule } from 'devextreme-angular/ui/form';
 
 @Component({
   templateUrl: 'profile.component.html',
   styleUrls: [ './profile.component.scss' ],
-  standalone: false
+  standalone: true,
+  imports: [DxFormModule],
 })
 
 export class ProfileComponent {
diff --git a/packages/devextreme-schematics/src/add-sample-views/files/pages/tasks/tasks.component.ts b/packages/devextreme-schematics/src/add-sample-views/files/pages/tasks/tasks.component.ts
index fcbfd6a8f..2f8e3c05a 100644
--- a/packages/devextreme-schematics/src/add-sample-views/files/pages/tasks/tasks.component.ts
+++ b/packages/devextreme-schematics/src/add-sample-views/files/pages/tasks/tasks.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { DxDataGridModule } from 'devextreme-angular/ui/data-grid';
 
 @Component({
   templateUrl: 'tasks.component.html',
   styleUrls: ['tasks.component.scss'],
-  standalone: false
+  standalone: true,
+  imports: [DxDataGridModule]
 })
 
 export class TasksComponent {
diff --git a/packages/devextreme-schematics/src/add-sample-views/index.ts b/packages/devextreme-schematics/src/add-sample-views/index.ts
index 80319da5f..099807a54 100644
--- a/packages/devextreme-schematics/src/add-sample-views/index.ts
+++ b/packages/devextreme-schematics/src/add-sample-views/index.ts
@@ -9,11 +9,6 @@ import {
   mergeWith
 } from '@angular-devkit/schematics';
 
-import {
-  addDeclarationToModule,
-  addImportToModule
-} from '@schematics/angular/utility/ast-utils';
-
 import { addViewToRouting } from '../add-view';
 
 import {
@@ -24,7 +19,6 @@ import {
 import { humanize } from '../utility/string';
 
 import {
-   applyChanges,
    insertItemToArray
  } from '../utility/change';
 
@@ -45,15 +39,6 @@ const sampleViewOptions = [
     relativePath: './pages/tasks/tasks.component'
 }];
 
-const devextremeOptions = [
-  {
-    componentName: 'DxDataGridModule',
-    relativePath: 'devextreme-angular'
-  }, {
-    componentName: 'DxFormModule',
-    relativePath: 'devextreme-angular'
-}];
-
 const navigations = [
   `  {
     text: 'Home',
@@ -76,26 +61,6 @@ const navigations = [
   }`
 ];
 
-function addImportsToRoutingModule(isView: boolean, routingPath: string, options: any) {
-  return (host: Tree) => {
-    const source = getSourceFile(host, routingPath);
-
-    if (!source) {
-      return host;
-    }
-
-    let changes;
-
-    if (isView) {
-      changes = addDeclarationToModule(source, routingPath, options.componentName, options.relativePath);
-    } else {
-      changes = addImportToModule(source, routingPath, options.componentName, options.relativePath);
-    }
-
-    return applyChanges(host, changes, routingPath);
-  };
-}
-
 function addDefaultNavigation(rootPath: string) {
   return (host: Tree) => {
     const navigationPath = rootPath + 'app-navigation.ts';
@@ -113,7 +78,6 @@ export default function(options: any): Rule {
   return async (host: Tree) => {
     const project = await getProjectName(host, options.project);
     const rootPath = await getApplicationPath(host, project);
-    const routingPath = rootPath + 'app-routing.module.ts';
     const rules: any[] = [];
 
     const templateSource = apply(url('./files'), [
@@ -126,12 +90,7 @@ export default function(options: any): Rule {
     rules.push(mergeWith(templateSource));
 
     sampleViewOptions.forEach((viewOptions) => {
-      rules.push(addViewToRouting({ name: viewOptions.name, project, module: 'app-routing' }));
-      rules.push(addImportsToRoutingModule(true, routingPath, viewOptions));
-    });
-
-    devextremeOptions.forEach((moduleOptions) => {
-      rules.push(addImportsToRoutingModule(false, routingPath, moduleOptions));
+      rules.push(addViewToRouting({ name: viewOptions.name, project, module: 'app.routes' }));
     });
 
     rules.push(addDefaultNavigation(rootPath));
diff --git a/packages/devextreme-schematics/src/add-sample-views/index_spec.ts b/packages/devextreme-schematics/src/add-sample-views/index_spec.ts
index dd01aad3d..cea2ce4eb 100644
--- a/packages/devextreme-schematics/src/add-sample-views/index_spec.ts
+++ b/packages/devextreme-schematics/src/add-sample-views/index_spec.ts
@@ -40,13 +40,12 @@ describe('sample views', () => {
     let tree = await runner.runSchematic('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree);
     tree = await runner.runSchematic('add-sample-views', sampleViewsOptions, tree);
 
-    const moduleContent = tree.readContent('/src/app/app-routing.module.ts');
+    const moduleContent = tree.readContent('/src/app/app.routes.ts');
 
     expect(moduleContent).toMatch(/component: HomeComponent/);
     expect(moduleContent).toMatch(/path: 'home'/);
 
     expect(moduleContent).toMatch(/import { HomeComponent } from /);
-    expect(moduleContent).toMatch(/declarations:\s\[\n*\s*HomeComponent/);
 
     const navigationContent = tree.readContent('/src/app/app-navigation.ts');
     expect(navigationContent).toMatch(/text: 'Home'/);
diff --git a/packages/devextreme-schematics/src/add-view/index.ts b/packages/devextreme-schematics/src/add-view/index.ts
index df593c21f..eba3a3f53 100644
--- a/packages/devextreme-schematics/src/add-view/index.ts
+++ b/packages/devextreme-schematics/src/add-view/index.ts
@@ -5,19 +5,21 @@ import {
   SchematicsException,
   externalSchematic
 } from '@angular-devkit/schematics';
-
+import { insertImport } from '@schematics/angular/utility/ast-utils';
 import {
   findModuleFromOptions
 } from '@schematics/angular/utility/find-module';
 
 import {
+  applyChanges,
   insertItemToArray
 } from '../utility/change';
 
 import {
   hasComponentInRoutes,
   getRoute,
-  findRoutesInSource
+  findRoutesInSource,
+  getRouteComponentName,
 } from '../utility/routing';
 
 import { getSourceFile } from '../utility/source';
@@ -101,6 +103,11 @@ export function addViewToRouting(options: any) {
     if (!hasComponentInRoutes(routes, options.name)) {
       const route = getRoute(options.name);
       insertItemToArray(host, routingModulePath, routes, route);
+
+      const name = options.name.replace(/^pages\//, '');
+      const componentName = getRouteComponentName(name);
+      const importChanges = insertImport(source, routingModulePath, componentName, `./pages/${name}/${name}.component`);
+      applyChanges(host, [importChanges], routingModulePath);
     }
     return host;
   };
@@ -115,7 +122,7 @@ function getPathForView(name: string) {
 
 function getModuleName(addRoute: boolean, moduleName: string) {
   if (!moduleName && addRoute) {
-    return 'app-routing';
+    return 'app.routes';
   }
   return moduleName;
 }
@@ -154,7 +161,7 @@ async function addContentToTS(options: any) {
   selector: 'app-${name}',
   templateUrl: './${name}.component.html',
   styleUrl: './${name}.component.css',
-  standalone: false
+  standalone: true
 })
 export class ${strings.classify(basename(normalize(name)))}Component {
 
@@ -178,7 +185,7 @@ export default function(options: any): Rule {
         skipTests: options.skipTests,
         inlineStyle: options.inlineStyle,
         prefix: options.prefix,
-        standalone: false
+        standalone: true
       }),
       addContentToView({ name, project }) as any,
       addContentToTS({ name, project }) as any
diff --git a/packages/devextreme-schematics/src/add-view/index_spec.ts b/packages/devextreme-schematics/src/add-view/index_spec.ts
index 4cebcdd57..d9f3a7877 100644
--- a/packages/devextreme-schematics/src/add-view/index_spec.ts
+++ b/packages/devextreme-schematics/src/add-view/index_spec.ts
@@ -60,7 +60,7 @@ describe('view', () => {
     expect(contentTS).toContain(`selector: 'app-${componentName}'`);
     expect(contentTS).toContain(`templateUrl: './${componentName}.component.html'`);
     expect(contentTS).toContain(`styleUrl: './${componentName}.component.css'`);
-    expect(contentTS).toContain('standalone: false');
+    expect(contentTS).toContain('standalone: true');
     expect(contentTS).toContain(`export class ${strings.classify(basename(normalize(componentName)))}Component`);
   });
 
@@ -71,29 +71,10 @@ describe('view', () => {
     let tree = await runner.runSchematic('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree);
     tree = await runner.runSchematic('add-view', options, tree);
     tree = await runner.runSchematic('add-view', { ...options, name: 'test2' }, tree);
-    const moduleContent = tree.readContent('/src/app/app-routing.module.ts');
+    const moduleContent = tree.readContent('/src/app/app.routes.ts');
 
-    expect(moduleContent).toContain(`const routes: Routes = [
-  {
-    path: 'pages/test2',
-    component: Test2Component,
-    canActivate: [ AuthGuardService ]
-  },
-  {
-    path: 'pages/test',
-    component: TestComponent,
-    canActivate: [ AuthGuardService ]
-  },
-  {
-    path: 'login-form',
-    component: LoginFormComponent,
-    canActivate: [ AuthGuardService ]
-  },
-  {
-    path: '**',
-    redirectTo: 'pages/test'
-  }
-];`);
+    expect(moduleContent).toContain(`path: 'pages/test2',\n    component: Test2Component,\n    canActivate: [ AuthGuardService ]`);
+    expect(moduleContent).toContain(`path: 'pages/test',\n    component: TestComponent,\n    canActivate: [ AuthGuardService ]`);
   });
 
   it('should add view to other routing module', async () => {
diff --git a/packages/devextreme-schematics/src/utility/routing.ts b/packages/devextreme-schematics/src/utility/routing.ts
index b83dbb259..3e8542c43 100644
--- a/packages/devextreme-schematics/src/utility/routing.ts
+++ b/packages/devextreme-schematics/src/utility/routing.ts
@@ -10,7 +10,7 @@ import {
   normalize
 } from '@angular-devkit/core';
 
-function getRouteComponentName(pageName: string) {
+export function getRouteComponentName(pageName: string) {
   return `${strings.classify(basename(normalize(pageName)))}Component`;
 }
 
diff --git a/templates-generator/angular-config.js b/templates-generator/angular-config.js
index ecd566d44..5102ea27b 100644
--- a/templates-generator/angular-config.js
+++ b/templates-generator/angular-config.js
@@ -127,19 +127,15 @@ module.exports = {
     ],
     removeRules: [
         {
-            glob: 'src/app/app-routing.module.ts',
+            glob: 'src/app/routes.ts',
             definitions: [
                 /import { HomeComponent } [^\n]*?\n/,
                 /import { ProfileComponent } [^\n]*?\n/,
                 /import { TasksComponent } [^\n]*?\n/,
-                /import { DxDataGridModule, DxFormModule } [^\n]*?\n/,
                 /{[^}]*?path: 'tasks'[^}]*?},\s+/,
                 /{[^}]*?path: 'profile'[^}]*?},\s+/,
                 /{[^}]*?path: 'home'[^}]*?},\s+/,
                 /},[^}]*?path: '\*\*'[^}]*/,
-                /, {\s?useHash: true\s?}/,
-                ', DxDataGridModule, DxFormModule',
-                /,\s+declarations: [^\]]*?]/,
                 /{[^}]*?path: 'pages\/new-page'[^}]*?},\s+/,
                 /import { NewPageComponent } [^\n]*?\n/
             ]