diff --git a/src/universal-app/BUILD.bazel b/src/universal-app/BUILD.bazel index a355b9f91e59..f981c0546e08 100644 --- 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 index 83773c967cc8..7a2332c9b242 100644 --- a/src/universal-app/index.html +++ b/src/universal-app/index.html @@ -30,6 +30,6 @@ - Loading... + Loading... diff --git a/src/universal-app/kitchen-sink-root.ts b/src/universal-app/kitchen-sink-root.ts deleted file mode 100644 index b4bb5d1b78a2..000000000000 --- a/src/universal-app/kitchen-sink-root.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {Component, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {ServerModule} from '@angular/platform-server'; -import {KitchenSinkModule} from './kitchen-sink/kitchen-sink'; - -@Component({ - selector: 'kitchen-sink-root', - template: ` -

Kitchen sink app

- - `, -}) -export class KitchenSinkRoot {} - -@NgModule({ - imports: [BrowserModule.withServerTransition({appId: 'kitchen-sink'}), KitchenSinkModule], - declarations: [KitchenSinkRoot], - exports: [KitchenSinkRoot], - bootstrap: [KitchenSinkRoot], -}) -export class KitchenSinkRootModule {} - -@NgModule({ - imports: [KitchenSinkRootModule, ServerModule], - bootstrap: [KitchenSinkRoot], -}) -export class KitchenSinkRootServerModule {} diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 72b7f3cb65a9..3331925e8ee7 100644 --- 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 { @Component({ template: ``, + 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, - 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, + 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 deleted file mode 100644 index 927d9a220778..000000000000 --- a/src/universal-app/main.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './kitchen-sink/kitchen-sink'; -export * from './kitchen-sink-root'; diff --git a/src/universal-app/prerender.ts b/src/universal-app/prerender.ts index 22e970236c67..75d255226f3f 100644 --- 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);