Skip to content

Commit d517c44

Browse files
crisbetocrisbeto
committed
build: switch kitchen sink to standalone (#27945)
Switches the kitchen sink to standalone which allows us to get rid of some unnecessary files. (cherry picked from commit 210dbd1)
1 parent 11eecc1 commit d517c44

File tree

6 files changed

+61
-86
lines changed

6 files changed

+61
-86
lines changed

‎src/universal-app/BUILD.bazel‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ package(default_visibility = ["//visibility:public"])
1111
ng_module(
1212
name = "kitchen-sink",
1313
srcs = [
14-
"kitchen-sink-root.ts",
1514
"kitchen-sink/kitchen-sink.ts",
1615
],
1716
assets = [
@@ -31,6 +30,8 @@ ts_library(
3130
],
3231
deps = [
3332
":kitchen-sink",
33+
"@npm//@angular/core",
34+
"@npm//@angular/platform-browser",
3435
"@npm//@angular/platform-server",
3536
"@npm//@bazel/runfiles",
3637
"@npm//@types/node",

‎src/universal-app/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,6 @@
3030
</style>
3131
</head>
3232
<body>
33-
<kitchen-sink-root>Loading...</kitchen-sink-root>
33+
<kitchen-sink>Loading...</kitchen-sink>
3434
</body>
3535
</html>

‎src/universal-app/kitchen-sink-root.ts‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/universal-app/kitchen-sink/kitchen-sink.ts‎

Lines changed: 31 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {FocusMonitor} from '@angular/cdk/a11y';
22
import {DragDropModule} from '@angular/cdk/drag-drop';
33
import {ScrollingModule, ViewportRuler} from '@angular/cdk/scrolling';
44
import {CdkTableModule, DataSource} from '@angular/cdk/table';
5-
import {Component, ElementRef, NgModule, ErrorHandler} from '@angular/core';
5+
import {Component, ElementRef} from '@angular/core';
66
import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
77
import {MatAutocompleteModule} from '@angular/material/autocomplete';
88
import {MatButtonModule} from '@angular/material/button';
@@ -51,52 +51,20 @@ export class TableDataSource extends DataSource<any> {
5151

5252
@Component({
5353
template: `<button>Do the thing</button>`,
54+
standalone: true,
5455
})
5556
export class TestEntryComponent {}
5657

5758
@Component({
5859
selector: 'kitchen-sink',
5960
templateUrl: './kitchen-sink.html',
60-
styles: [
61-
`
61+
standalone: true,
62+
styles: `
6263
.universal-viewport {
6364
height: 100px;
6465
border: 1px solid black;
6566
}
6667
`,
67-
],
68-
})
69-
export class KitchenSink {
70-
/** List of columns for the CDK and Material table. */
71-
tableColumns = ['userId'];
72-
73-
/** Data source for the CDK and Material table. */
74-
tableDataSource = new TableDataSource();
75-
76-
/** Data used to render a virtual scrolling list. */
77-
virtualScrollData = Array(10000).fill(50);
78-
79-
constructor(
80-
snackBar: MatSnackBar,
81-
dialog: MatDialog,
82-
viewportRuler: ViewportRuler,
83-
focusMonitor: FocusMonitor,
84-
elementRef: ElementRef<HTMLElement>,
85-
bottomSheet: MatBottomSheet,
86-
) {
87-
focusMonitor.focusVia(elementRef, 'program');
88-
snackBar.open('Hello there');
89-
dialog.open(TestEntryComponent);
90-
bottomSheet.open(TestEntryComponent);
91-
92-
// Do a sanity check on the viewport ruler.
93-
viewportRuler.getViewportRect();
94-
viewportRuler.getViewportSize();
95-
viewportRuler.getViewportScrollPosition();
96-
}
97-
}
98-
99-
@NgModule({
10068
imports: [
10169
MatAutocompleteModule,
10270
MatBadgeModule,
@@ -143,20 +111,33 @@ export class KitchenSink {
143111
YouTubePlayerModule,
144112
GoogleMapsModule,
145113
],
146-
declarations: [KitchenSink, TestEntryComponent],
147-
exports: [KitchenSink, TestEntryComponent],
148-
providers: [
149-
{
150-
// If an error is thrown asynchronously during server-side rendering it'll get logged to stderr,
151-
// but it won't cause the build to fail. We still want to catch these errors so we provide an
152-
// `ErrorHandler` that re-throws the error and causes the process to exit correctly.
153-
provide: ErrorHandler,
154-
useValue: {handleError: ERROR_HANDLER},
155-
},
156-
],
157114
})
158-
export class KitchenSinkModule {}
115+
export class KitchenSink {
116+
/** List of columns for the CDK and Material table. */
117+
tableColumns = ['userId'];
118+
119+
/** Data source for the CDK and Material table. */
120+
tableDataSource = new TableDataSource();
121+
122+
/** Data used to render a virtual scrolling list. */
123+
virtualScrollData = Array(10000).fill(50);
124+
125+
constructor(
126+
snackBar: MatSnackBar,
127+
dialog: MatDialog,
128+
viewportRuler: ViewportRuler,
129+
focusMonitor: FocusMonitor,
130+
elementRef: ElementRef<HTMLElement>,
131+
bottomSheet: MatBottomSheet,
132+
) {
133+
focusMonitor.focusVia(elementRef, 'program');
134+
snackBar.open('Hello there');
135+
dialog.open(TestEntryComponent);
136+
bottomSheet.open(TestEntryComponent);
159137

160-
export function ERROR_HANDLER(error: Error) {
161-
throw error;
138+
// Do a sanity check on the viewport ruler.
139+
viewportRuler.getViewportRect();
140+
viewportRuler.getViewportSize();
141+
viewportRuler.getViewportScrollPosition();
142+
}
162143
}

‎src/universal-app/main.ts‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/universal-app/prerender.ts‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import 'reflect-metadata';
22
import 'zone.js';
33

4-
import {renderModule} from '@angular/platform-server';
4+
import {ErrorHandler} from '@angular/core';
5+
import {bootstrapApplication, provideClientHydration} from '@angular/platform-browser';
6+
import {renderApplication} from '@angular/platform-server';
57
import {readFileSync, writeFileSync} from 'fs';
68
import {join} from 'path';
79
import {runfiles} from '@bazel/runfiles';
810

9-
import {KitchenSinkRootServerModule} from './kitchen-sink-root';
11+
import {KitchenSink} from './kitchen-sink/kitchen-sink';
12+
import {provideNoopAnimations} from '@angular/platform-browser/animations';
1013

1114
// Do not enable production mode, because otherwise the `MatCommonModule` won't execute
1215
// the browser related checks that could cause NodeJS issues.
@@ -15,7 +18,27 @@ import {KitchenSinkRootServerModule} from './kitchen-sink-root';
1518
const indexHtmlPath = runfiles.resolvePackageRelative('./index.html');
1619
const themeCssPath = runfiles.resolvePackageRelative('./theme.css');
1720

18-
const result = renderModule(KitchenSinkRootServerModule, {
21+
function bootstrap() {
22+
return bootstrapApplication(KitchenSink, {
23+
providers: [
24+
provideNoopAnimations(),
25+
provideClientHydration(),
26+
{
27+
// If an error is thrown asynchronously during server-side rendering it'll get logged to
28+
// stderr, but it won't cause the build to fail. We still want to catch these errors so we
29+
// provide an ErrorHandler that rethrows the error and causes the process to exit correctly.
30+
provide: ErrorHandler,
31+
useValue: {
32+
handleError: (error: Error) => {
33+
throw error;
34+
},
35+
},
36+
},
37+
],
38+
});
39+
}
40+
41+
const result = renderApplication(bootstrap, {
1942
document: readFileSync(indexHtmlPath, 'utf-8'),
2043
});
2144
const outDir = process.env['TEST_UNDECLARED_OUTPUTS_DIR'] as string;
@@ -31,8 +54,7 @@ result
3154
writeFileSync(themeFilename, readFileSync(themeCssPath, 'utf-8'), 'utf-8');
3255
console.log('Prerender done.');
3356
})
34-
// If rendering the module factory fails, print the error and exit the process
35-
// with a non-zero exit code.
57+
// If rendering fails, print the error and exit the process with a non-zero exit code.
3658
.catch(error => {
3759
console.error(error);
3860
process.exit(1);

0 commit comments

Comments
 (0)