Skip to content

Commit 4b191fe

Browse files
GoodDayForSurfGoodDayForSurf
authored
Use standalone in Angular app (#951)
* use standalone in Angular app
1 parent ae5d930 commit 4b191fe

File tree

31 files changed

+229
-355
lines changed

31 files changed

+229
-355
lines changed

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ function localPackageExists(packageName) {
6363

6464
const hasSutableNgCli = async() => {
6565
const localVersion = ngVersion.getLocalNgVersion();
66+
6667
if(!localVersion) {
6768
return false;
6869
}
@@ -105,7 +106,7 @@ const create = async(appName, options) => {
105106
'--routing=false',
106107
'--skip-tests=true',
107108
'--skip-install=true',
108-
'--standalone=false',
109+
'--standalone=true',
109110
'--ssr=false'
110111
];
111112

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

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

157158
fs.writeFileSync(
158159
filePath,

‎packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-material-large-create-account-snap.png‎

10 Bytes
Loading

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ module.exports = (env, { port = 8080, urls = {} } = {}) => {
3131
let browser;
3232
let page;
3333

34-
const getPageURL = (name) => `${appUrl}${(env.engine.indexOf('nextjs') !== 0 ? '#/' : '')}${pageUrls[name]}`;
34+
const getPageURL = (name) => `${appUrl}${(!env.engine.startsWith('nextjs') ? '#/' : '')}${pageUrls[name]}`;
3535

3636
beforeAll(async() => {
3737
browser = await getBrowser();
@@ -281,11 +281,12 @@ module.exports = (env, { port = 8080, urls = {} } = {}) => {
281281
await page.waitForSelector('.create-account-form');
282282

283283
await hideScroll();
284-
285284
await page.waitForTimeout(3000);
286285
const image = await takeScreenshot();
287286

288-
compareSnapshot(image, 'create-account');
287+
compareSnapshot(image, 'create-account', {
288+
threshold: 0.05
289+
});
289290
});
290291

291292
it('Reset password page', async() => {

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

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ const sandboxPath = path.join(process.cwd(), './testing/sandbox/angular');
1111
const appPath = path.join(sandboxPath, appName);
1212
const schematicsDirectory = '../../../../devextreme-schematics';
1313
const schematicsPath = path.join(sandboxPath, schematicsDirectory);
14-
const routingFilePath = path.join(appPath, 'src/app/app-routing.module.ts');
15-
const appComponentPath = path.join(appPath, 'src/app/app.component.html');
14+
const appComponentTemplatePath = path.join(appPath, 'src/app/app.component.html');
15+
const appComponentPath = path.join(appPath, 'src/app/app.component.ts');
1616

1717
async function prepareSchematics() {
1818
await packageManager.runInstall({
@@ -60,16 +60,28 @@ exports.createApp = async(depsVersionTag) => {
6060
cwd: appPath,
6161
forceNoCmd: true
6262
});
63-
64-
const data = fs.readFileSync(routingFilePath, 'utf8');
65-
const result = data.replace('RouterModule.forRoot(routes)', 'RouterModule.forRoot(routes, {useHash: true})');
66-
fs.writeFileSync(routingFilePath, result, 'utf8');
6763
};
6864

6965
exports.setLayout = (layoutName) => {
70-
const regexToFind = /app-side-nav-\w+-toolbar/g;
71-
const newSubStr = `app-${layoutName}`;
72-
const data = fs.readFileSync(appComponentPath, 'utf8');
73-
const result = data.replace(regexToFind, newSubStr);
74-
fs.writeFileSync(appComponentPath, result, 'utf8');
66+
const layoutClassName = layoutName === 'side-nav-outer-toolbar'
67+
? 'SideNavOuterToolbarComponent'
68+
: 'SideNavInnerToolbarComponent';
69+
70+
[
71+
{
72+
filePath: appComponentTemplatePath,
73+
regexp: /app-side-nav-\w+-toolbar/g,
74+
replacement: `app-${layoutName}`,
75+
},
76+
{
77+
filePath: appComponentPath,
78+
regexp: /SideNav\w+ToolbarComponent/,
79+
replacement: layoutClassName,
80+
}
81+
].forEach(({ filePath, regexp, replacement }) => {
82+
const data = fs.readFileSync(filePath, 'utf8');
83+
const result = data.replace(regexp, replacement);
84+
fs.writeFileSync(filePath, result, 'utf8');
85+
});
86+
7587
};

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
11
import { Component, HostBinding } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { RouterModule, RouterOutlet } from '@angular/router';
24
import { AuthService, ScreenService, AppInfoService } from './shared/services';
5+
import { DxHttpModule } from 'devextreme-angular/http';
6+
import { FooterComponent } from './shared/components';
7+
import { UnauthenticatedContentComponent } from './unauthenticated-content';
8+
39

410
@Component({
511
selector: '<%= prefix %>-root',
612
templateUrl: './<%= name %>.component.html',
713
styleUrls: ['./<%= name %>.component.scss'],
8-
standalone: false
14+
standalone: true,
15+
imports: [
16+
RouterModule,
17+
RouterOutlet,
18+
CommonModule,
19+
DxHttpModule,
20+
SideNavToolbarComponent,
21+
FooterComponent,
22+
UnauthenticatedContentComponent,
23+
],
24+
providers: []
925
})
1026
export class <%= strings.classify(name) %>Component {
1127
@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, withHashLocation } 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, withHashLocation()),
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: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { Component, NgModule, Input} from '@angular/core';
1+
import { Component, Input} from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
44

55
@Component({
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-
}

0 commit comments

Comments
 (0)