Using Preboot for Maintaining UI State during Pre-rendering

Show how to implement Preboot in an Angular Universal project to capture events in a server-side view and replay them on the client-side, ensuring a smooth transition for SEO pre-rendering.

import { PrebootModule } from 'preboot';

@NgModule({
  imports: [
    // ... other modules
    PrebootModule.withConfig({ appRoot: 'app-root' }) // Replace 'app-root' with the selector of your root component
  ],
  // ... other metadata
})
export class AppModule { }

In your Angular module, import the PrebootModule and configure it to use the root selector of your Angular application. This should be included in your server-side module, typically named 'app.server.module.ts'.

// In your 'main.ts' for the server
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
// other imports...
import { AppServerModule } from './path/to/app.server.module';

enableProdMode();

app.engine('html', (_, options, callback) => {
  let engine = ngExpressEngine({
    bootstrap: AppServerModule,
  });

  engine(_, options, (err, html) => {
    // Pre-render the app into html
    // You can capture SEO metadata here
    callback(err, html);
  });
});

app.set('view engine', 'html');

In the server's main file, typically 'main.ts' or 'server.ts', set up the ngExpressEngine with the AppServerModule. This section of code is where your Angular application is pre-rendered on the server.

// In your 'main.ts' for the browser
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { PrebootOptions } from 'preboot';

const prebootOptions: PrebootOptions = { appRoot: 'app-root', replay: true, buffer: true };
document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
    // After the app is stable, we replay all events that were stored by Preboot
    const preboot = window['preboot'];
    if (preboot && preboot.complete) {
      preboot.complete(prebootOptions);
    }
  });
});

In the browser's main file, typically 'main.ts', bootstrap the client-side application and set up Preboot to replay events after the app is stable. Ensure that the 'appRoot' value matches your application's root component selector.