build: switch kitchen sink to standalone

Switches the kitchen sink to standalone which allows us to get rid of some unnecessary files.
crisbeto · Oct 12, 2023 · f9a1d90 · f9a1d90
1 parent f5895a3
commit f9a1d90
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 86 deletions.
diff --git a/src/universal-app/BUILD.bazel b/src/universal-app/BUILD.bazel
@@ -11,7 +11,6 @@ package(default_visibility = ["//visibility:public"])
 ng_module(
     name = "kitchen-sink",
     srcs = [
-        "kitchen-sink-root.ts",
         "kitchen-sink/kitchen-sink.ts",
     ],
     assets = [
@@ -31,6 +30,8 @@ ts_library(
     ],
     deps = [
         ":kitchen-sink",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
         "@npm//@angular/platform-server",
         "@npm//@bazel/runfiles",
         "@npm//@types/node",

diff --git a/src/universal-app/index.html b/src/universal-app/index.html
@@ -30,6 +30,6 @@
   </style>
 </head>
 <body>
-  <kitchen-sink-root>Loading...</kitchen-sink-root>
+  <kitchen-sink>Loading...</kitchen-sink>
 </body>
 </html>
diff --git a/src/universal-app/kitchen-sink-root.ts b/src/universal-app/kitchen-sink-root.ts
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts
@@ -2,7 +2,7 @@ import {FocusMonitor} from '@angular/cdk/a11y';
 import {DragDropModule} from '@angular/cdk/drag-drop';
 import {ScrollingModule, ViewportRuler} from '@angular/cdk/scrolling';
 import {CdkTableModule, DataSource} from '@angular/cdk/table';
-import {Component, ElementRef, NgModule, ErrorHandler} from '@angular/core';
+import {Component, ElementRef} from '@angular/core';
 import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatButtonModule} from '@angular/material/button';
@@ -51,52 +51,20 @@ export class TableDataSource extends DataSource<any> {
 
 @Component({
   template: `<button>Do the thing</button>`,
+  standalone: true,
 })
 export class TestEntryComponent {}
 
 @Component({
   selector: 'kitchen-sink',
   templateUrl: './kitchen-sink.html',
-  styles: [
-    `
+  standalone: true,
+  styles: `
     .universal-viewport {
       height: 100px;
       border: 1px solid black;
     }
   `,
-  ],
-})
-export class KitchenSink {
-  /** List of columns for the CDK and Material table. */
-  tableColumns = ['userId'];
-
-  /** Data source for the CDK and Material table. */
-  tableDataSource = new TableDataSource();
-
-  /** Data used to render a virtual scrolling list. */
-  virtualScrollData = Array(10000).fill(50);
-
-  constructor(
-    snackBar: MatSnackBar,
-    dialog: MatDialog,
-    viewportRuler: ViewportRuler,
-    focusMonitor: FocusMonitor,
-    elementRef: ElementRef<HTMLElement>,
-    bottomSheet: MatBottomSheet,
-  ) {
-    focusMonitor.focusVia(elementRef, 'program');
-    snackBar.open('Hello there');
-    dialog.open(TestEntryComponent);
-    bottomSheet.open(TestEntryComponent);
-
-    // Do a sanity check on the viewport ruler.
-    viewportRuler.getViewportRect();
-    viewportRuler.getViewportSize();
-    viewportRuler.getViewportScrollPosition();
-  }
-}
-
-@NgModule({
   imports: [
     MatAutocompleteModule,
     MatBadgeModule,
@@ -143,20 +111,33 @@ export class KitchenSink {
     YouTubePlayerModule,
     GoogleMapsModule,
   ],
-  declarations: [KitchenSink, TestEntryComponent],
-  exports: [KitchenSink, TestEntryComponent],
-  providers: [
-    {
-      // If an error is thrown asynchronously during server-side rendering it'll get logged to stderr,
-      // but it won't cause the build to fail. We still want to catch these errors so we provide an
-      // `ErrorHandler` that re-throws the error and causes the process to exit correctly.
-      provide: ErrorHandler,
-      useValue: {handleError: ERROR_HANDLER},
-    },
-  ],
 })
-export class KitchenSinkModule {}
+export class KitchenSink {
+  /** List of columns for the CDK and Material table. */
+  tableColumns = ['userId'];
+
+  /** Data source for the CDK and Material table. */
+  tableDataSource = new TableDataSource();
+
+  /** Data used to render a virtual scrolling list. */
+  virtualScrollData = Array(10000).fill(50);
+
+  constructor(
+    snackBar: MatSnackBar,
+    dialog: MatDialog,
+    viewportRuler: ViewportRuler,
+    focusMonitor: FocusMonitor,
+    elementRef: ElementRef<HTMLElement>,
+    bottomSheet: MatBottomSheet,
+  ) {
+    focusMonitor.focusVia(elementRef, 'program');
+    snackBar.open('Hello there');
+    dialog.open(TestEntryComponent);
+    bottomSheet.open(TestEntryComponent);
 
-export function ERROR_HANDLER(error: Error) {
-  throw error;
+    // Do a sanity check on the viewport ruler.
+    viewportRuler.getViewportRect();
+    viewportRuler.getViewportSize();
+    viewportRuler.getViewportScrollPosition();
+  }
 }
diff --git a/src/universal-app/main.ts b/src/universal-app/main.ts
diff --git a/src/universal-app/prerender.ts b/src/universal-app/prerender.ts
@@ -1,12 +1,15 @@
 import 'reflect-metadata';
 import 'zone.js';
 
-import {renderModule} from '@angular/platform-server';
+import {ErrorHandler} from '@angular/core';
+import {bootstrapApplication, provideClientHydration} from '@angular/platform-browser';
+import {renderApplication} from '@angular/platform-server';
 import {readFileSync, writeFileSync} from 'fs';
 import {join} from 'path';
 import {runfiles} from '@bazel/runfiles';
 
-import {KitchenSinkRootServerModule} from './kitchen-sink-root';
+import {KitchenSink} from './kitchen-sink/kitchen-sink';
+import {provideNoopAnimations} from '@angular/platform-browser/animations';
 
 // Do not enable production mode, because otherwise the `MatCommonModule` won't execute
 // the browser related checks that could cause NodeJS issues.
@@ -15,7 +18,27 @@ import {KitchenSinkRootServerModule} from './kitchen-sink-root';
 const indexHtmlPath = runfiles.resolvePackageRelative('./index.html');
 const themeCssPath = runfiles.resolvePackageRelative('./theme.css');
 
-const result = renderModule(KitchenSinkRootServerModule, {
+function bootstrap() {
+  return bootstrapApplication(KitchenSink, {
+    providers: [
+      provideNoopAnimations(),
+      provideClientHydration(),
+      {
+        // If an error is thrown asynchronously during server-side rendering it'll get logged to
+        // stderr, but it won't cause the build to fail. We still want to catch these errors so we
+        // provide an ErrorHandler that rethrows the error and causes the process to exit correctly.
+        provide: ErrorHandler,
+        useValue: {
+          handleError: (error: Error) => {
+            throw error;
+          },
+        },
+      },
+    ],
+  });
+}
+
+const result = renderApplication(bootstrap, {
   document: readFileSync(indexHtmlPath, 'utf-8'),
 });
 const outDir = process.env['TEST_UNDECLARED_OUTPUTS_DIR'] as string;
@@ -31,8 +54,7 @@ result
     writeFileSync(themeFilename, readFileSync(themeCssPath, 'utf-8'), 'utf-8');
     console.log('Prerender done.');
   })
-  // If rendering the module factory fails, print the error and exit the process
-  // with a non-zero exit code.
+  // If rendering fails, print the error and exit the process with a non-zero exit code.
   .catch(error => {
     console.error(error);
     process.exit(1);