Skip to content

Commit 815f17d

Browse files
GoodDayForSurfGoodDayForSurf
committed
use standalone in Angular app
1 parent 3a95283 commit 815f17d

File tree

28 files changed

+194
-273
lines changed

28 files changed

+194
-273
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ const create = async(appName, options) => {
105105
'--routing=false',
106106
'--skip-tests=true',
107107
'--skip-install=true',
108-
'--standalone=false',
108+
'--standalone=true',
109109
'--ssr=false'
110110
];
111111

@@ -150,9 +150,9 @@ const changeMainTs = (appPath) => {
150150
moduleWorker.insertImport(filePath, 'devextreme/ui/themes', 'themes', true);
151151

152152
const fileContent = fs.readFileSync(filePath).toString();
153-
const bootstrapPattern = /platformBrowser(?:Dynamic)?\(\)\.bootstrapModule\(\s*AppModule\s*(?:,\s*\{[^}]*\})?\s*\)/;
153+
const bootstrapPattern = /bootstrapApplication\([^)]+\)/;
154154
const firstChaptStr = fileContent.match(bootstrapPattern)[0];
155-
const lastChaptStr = '.catch(err => console.error(err));';
155+
const lastChaptStr = '.catch((err) => console.error(err));';
156156

157157
fs.writeFileSync(
158158
filePath,

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ const defaultLayout = 'side-nav-outer-toolbar';
1010
module.exports = (env) => {
1111
const appUrl = `http://${ip.address()}:8080/`;
1212
const diffSnapshotsDir = path.join('testing/__tests__/__diff_snapshots__', env.engine);
13+
const pageUrls = {
14+
profile: 'profile',
15+
tasks: 'tasks',
16+
page: `${(env.engine === 'angular' ? 'pages/' : '')}new-page`,
17+
'change-password': 'change-password/123',
18+
};
1319

1420
describe(`${env.engine} app-template`, () => {
1521
let browser;
@@ -32,7 +38,7 @@ module.exports = (env) => {
3238

3339
describe(layout, () => {
3440
const devServer = new DevServer(env);
35-
41+
const getPageURL = (name) => `${appUrl}${(env.engine.indexOf('angular') !== 0 ? '#/' : '')}${pageUrls[name]}`;
3642
beforeAll(async() => {
3743
try {
3844
await devServer.setLayout(layout);
@@ -172,7 +178,7 @@ module.exports = (env) => {
172178
});
173179

174180
it('Profile view', async() => {
175-
await openPage(`${appUrl}#/profile`);
181+
await openPage(getPageURL('profile'));
176182

177183
await page.waitForTimeout(3000);
178184

@@ -189,7 +195,7 @@ module.exports = (env) => {
189195
});
190196

191197
it('Tasks view', async() => {
192-
await openPage(`${appUrl}#/tasks`);
198+
await openPage(getPageURL('tasks'));
193199
// NOTE: Wait for the DataGrid is loaded
194200
await page.waitForSelector('.dx-row-focused');
195201
await page.waitForTimeout(3000);
@@ -199,11 +205,7 @@ module.exports = (env) => {
199205
});
200206

201207
it('Add view', async() => {
202-
let pageUrl = 'new-page';
203-
if(env.engine === 'angular') {
204-
pageUrl = 'pages/' + pageUrl;
205-
}
206-
await openPage(`${appUrl}#/${pageUrl}`);
208+
await openPage(getPageURL('new-page'));
207209
await page.waitForTimeout(3000);
208210
const image = await takeScreenshot();
209211

@@ -212,7 +214,7 @@ module.exports = (env) => {
212214

213215
it('Menu toggle', async() => {
214216
const menuButtonSelector = '.menu-button .dx-button';
215-
await openPage(`${appUrl}#/profile`);
217+
await openPage(getPageURL('profile'));
216218
await page.waitForSelector(menuButtonSelector);
217219
await page.click(menuButtonSelector);
218220

@@ -224,7 +226,7 @@ module.exports = (env) => {
224226
});
225227

226228
it('User panel', async() => {
227-
await openPage(`${appUrl}#/profile`);
229+
await openPage(getPageURL('profile'));
228230
const isCompact = await page.$('.dx-toolbar-item-invisible .user-button');
229231
await page.click(isCompact ? '.dx-dropdownmenu-button' : '.user-button');
230232
// NOTE: Wait for animation complete
@@ -310,7 +312,7 @@ module.exports = (env) => {
310312
await openPage(appUrl);
311313
await logOut();
312314
await page.evaluate(
313-
'const a = document.createElement("a");a.href="#/change-password/123";a.click()'
315+
`const a = document.createElement("a");a.href="${getPageURL('change-password')}";a.click()`
314316
);
315317
await page.waitForSelector('form');
316318

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,29 @@
11
import { Component, HostBinding } from '@angular/core';
2-
import { AuthService, ScreenService, AppInfoService } from './shared/services';
2+
import { CommonModule } from '@angular/common';
3+
import { RouterModule, RouterOutlet } from '@angular/router';
4+
import {ScreenService, AppInfoService, AuthService } from './shared/services';
5+
import { DxHttpModule } from 'devextreme-angular/http';
6+
import { SideNavOuterToolbarComponent, SideNavInnerToolbarComponent } from './layouts';
7+
import { FooterComponent } from './shared/components';
8+
import { UnauthenticatedContentComponent } from './unauthenticated-content';
9+
310

411
@Component({
512
selector: '<%= prefix %>-root',
613
templateUrl: './<%= name %>.component.html',
714
styleUrls: ['./<%= name %>.component.scss'],
8-
standalone: false
15+
standalone: true,
16+
imports: [
17+
RouterModule,
18+
RouterOutlet,
19+
CommonModule,
20+
DxHttpModule,
21+
SideNavOuterToolbarComponent,
22+
SideNavInnerToolbarComponent,
23+
FooterComponent,
24+
UnauthenticatedContentComponent,
25+
],
26+
providers: []
927
})
1028
export class <%= strings.classify(name) %>Component {
1129
@HostBinding('class') get getClass() {

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
import { routes } from './app.routes';
4+
import {
5+
AppInfoService,
6+
AuthGuardService,
7+
AuthService,
8+
ScreenService,
9+
} from './shared/services';
10+
11+
export const appConfig: ApplicationConfig = {
12+
providers: [
13+
provideZoneChangeDetection({ eventCoalescing: true }),
14+
provideRouter(routes),
15+
AuthGuardService,
16+
AuthService,
17+
ScreenService,
18+
AppInfoService,
19+
]
20+
};

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { NgModule } from '@angular/core';
2-
import { Routes, RouterModule } from '@angular/router';
1+
import { Routes } from '@angular/router';
32
import { LoginFormComponent, ResetPasswordFormComponent, CreateAccountFormComponent, ChangePasswordFormComponent } from './shared/components';
43
import { AuthGuardService } from './shared/services';
54

6-
const routes: Routes = [
5+
export const routes: Routes = [
76
{
87
path: 'login-form',
98
component: LoginFormComponent,
@@ -25,10 +24,3 @@ const routes: Routes = [
2524
canActivate: [ AuthGuardService ]
2625
}
2726
];
28-
29-
@NgModule({
30-
imports: [RouterModule.forRoot(routes, { useHash: true })],
31-
providers: [AuthGuardService],
32-
exports: [RouterModule]
33-
})
34-
export class AppRoutingModule { }

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, NgModule, Input, ViewChild } from '@angular/core';
1+
import { Component, OnInit, Input, ViewChild } from '@angular/core';
22
import { Router, NavigationEnd } from '@angular/router';
33
import { CommonModule } from '@angular/common';
44

@@ -7,15 +7,23 @@ import { DxDrawerModule, DxDrawerTypes } from 'devextreme-angular/ui/drawer';
77
import { DxScrollViewModule, DxScrollViewComponent } from 'devextreme-angular/ui/scroll-view';
88
import { DxToolbarModule, DxToolbarTypes } from 'devextreme-angular/ui/toolbar';
99

10-
import { SideNavigationMenuModule, HeaderModule } from '../../shared/components';
10+
import { SideNavigationMenuComponent, HeaderComponent } from '../../shared/components';
1111
import { ScreenService } from '../../shared/services';
1212
import { ThemeService } from '../../shared/services/theme.service';
1313

1414
@Component({
1515
selector: 'app-side-nav-inner-toolbar',
1616
templateUrl: './side-nav-inner-toolbar.component.html',
1717
styleUrls: ['./side-nav-inner-toolbar.component.scss'],
18-
standalone: false
18+
standalone: true,
19+
imports: [
20+
SideNavigationMenuComponent,
21+
DxDrawerModule,
22+
HeaderComponent,
23+
DxToolbarModule,
24+
DxScrollViewModule,
25+
CommonModule,
26+
]
1927
})
2028
export class SideNavInnerToolbarComponent implements OnInit {
2129
@ViewChild(DxScrollViewComponent, { static: true }) scrollView!: DxScrollViewComponent;
@@ -105,10 +113,3 @@ export class SideNavInnerToolbarComponent implements OnInit {
105113
}
106114
}
107115
}
108-
109-
@NgModule({
110-
imports: [ SideNavigationMenuModule, DxDrawerModule, HeaderModule, DxToolbarModule, DxScrollViewModule, CommonModule ],
111-
exports: [ SideNavInnerToolbarComponent ],
112-
declarations: [ SideNavInnerToolbarComponent ]
113-
})
114-
export class SideNavInnerToolbarModule { }

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
import { Component, OnInit, NgModule, Input, ViewChild } from '@angular/core';
1+
import { Component, OnInit, Input, ViewChild } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { Router, NavigationEnd } from '@angular/router';
44

5+
56
import { DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
67
import { DxDrawerModule, DxDrawerTypes } from 'devextreme-angular/ui/drawer';
78
import { DxScrollViewModule, DxScrollViewComponent } from 'devextreme-angular/ui/scroll-view';
89

9-
import { SideNavigationMenuModule, HeaderModule } from '../../shared/components';
10+
import { SideNavigationMenuComponent, HeaderComponent } from '../../shared/components';
1011
import { ScreenService, ThemeService } from '../../shared/services';
1112

1213
@Component({
1314
selector: 'app-side-nav-outer-toolbar',
1415
templateUrl: './side-nav-outer-toolbar.component.html',
1516
styleUrls: ['./side-nav-outer-toolbar.component.scss'],
16-
standalone: false
17+
standalone: true,
18+
imports: [ CommonModule, SideNavigationMenuComponent, DxDrawerModule, HeaderComponent, DxScrollViewModule ],
1719
})
1820
export class SideNavOuterToolbarComponent implements OnInit {
1921
@ViewChild(DxScrollViewComponent, { static: true }) scrollView!: DxScrollViewComponent;
@@ -98,10 +100,3 @@ export class SideNavOuterToolbarComponent implements OnInit {
98100
}
99101
}
100102
}
101-
102-
@NgModule({
103-
imports: [ SideNavigationMenuModule, DxDrawerModule, HeaderModule, DxScrollViewModule, CommonModule ],
104-
exports: [ SideNavOuterToolbarComponent ],
105-
declarations: [ SideNavOuterToolbarComponent ]
106-
})
107-
export class SideNavOuterToolbarModule { }

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
66
selector: 'app-single-card',
77
templateUrl: './single-card.component.html',
88
styleUrls: ['./single-card.component.scss'],
9-
standalone: false
9+
standalone: true,
10+
imports: [ CommonModule, DxScrollViewModule ],
1011
})
1112
export class SingleCardComponent {
1213
@Input()
@@ -17,12 +18,3 @@ export class SingleCardComponent {
1718

1819
constructor() { }
1920
}
20-
21-
@NgModule({
22-
imports: [ CommonModule, DxScrollViewModule ],
23-
exports: [ SingleCardComponent ],
24-
declarations: [ SingleCardComponent ]
25-
})
26-
export class SingleCardModule {
27-
28-
}

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

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CommonModule } from '@angular/common';
2-
import { Component, NgModule } from '@angular/core';
2+
import { Component } from '@angular/core';
33
import { RouterModule } from '@angular/router';
4-
import { SingleCardModule } from './layouts';
4+
import { SingleCardComponent } from './layouts';
55
import { Router } from '@angular/router';
66

77
@Component({
@@ -17,7 +17,12 @@ import { Router } from '@angular/router';
1717
height: 100%;
1818
}
1919
`],
20-
standalone: false
20+
standalone: true,
21+
imports: [
22+
CommonModule,
23+
RouterModule,
24+
SingleCardComponent,
25+
]
2126
})
2227
export class NotAuthorizedContainerComponent {
2328

@@ -42,13 +47,3 @@ export class NotAuthorizedContainerComponent {
4247
}
4348
}
4449
}
45-
@NgModule({
46-
imports: [
47-
CommonModule,
48-
RouterModule,
49-
SingleCardModule,
50-
],
51-
declarations: [NotAuthorizedContainerComponent],
52-
exports: [NotAuthorizedContainerComponent]
53-
})
54-
export class NotAuthorizedContainerModule { }

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

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CommonModule } from '@angular/common';
2-
import { Component, NgModule, OnInit } from '@angular/core';
2+
import { Component, OnInit } from '@angular/core';
33
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
44
import { ValidationCallbackData } from 'devextreme-angular/common';
55
import { DxFormModule } from 'devextreme-angular/ui/form';
@@ -11,7 +11,13 @@ import { AuthService } from '../../services';
1111
@Component({
1212
selector: 'app-change-passsword-form',
1313
templateUrl: './change-password-form.component.html',
14-
standalone: false
14+
standalone: true,
15+
imports: [
16+
CommonModule,
17+
RouterModule,
18+
DxFormModule,
19+
DxLoadIndicatorModule,
20+
]
1521
})
1622
export class ChangePasswordFormComponent implements OnInit {
1723
loading = false;
@@ -45,14 +51,3 @@ export class ChangePasswordFormComponent implements OnInit {
4551
return e.value === this.formData.password;
4652
}
4753
}
48-
@NgModule({
49-
imports: [
50-
CommonModule,
51-
RouterModule,
52-
DxFormModule,
53-
DxLoadIndicatorModule
54-
],
55-
declarations: [ ChangePasswordFormComponent ],
56-
exports: [ ChangePasswordFormComponent ]
57-
})
58-
export class ChangePasswordFormModule { }

0 commit comments

Comments
 (0)