angular-ssr-element-preserver

What this Does

This is a proof of concept, do not use in production!

This module is designed to protect a subset of elements in a pre-rendered Angular app, to reference and re-insert the elements after Angular has bootstrapped in the browser instead of destroying and recreating them.

There are limitations to this approach:

• If there are iframes inside the protected element (such as ads), the iframes will reload once re-inserted into the DOM after bootstrapped in the browser.
• Angular Bindings inside the protected element won't work after bootstrap in the browser, but the element will have the values that were bound when the page was pre-rendered (Angular Elements are an exception)

How to Use

Step 1: Install

npm install angular-ssr-element-preserver

Step 2: Update app.module.ts:

import { ElementPreserverModule } from 'angular-ssr-element-preserver';

@NgModule({
  ...
  imports: [
    ElementPreserverModule.forBrowser(),
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
  ],
  ...
})
export class AppModule {}

Step 4: Update app.server.module.ts:

import { ElementPreserverModule } from 'angular-ssr-element-preserver';

@NgModule({
  imports: [AppModule, ServerModule, ElementPreserverModule.forServer()],
  ...
})
export class AppServerModule {}

Step 4: Add this script before the closing