Angular-ssr-element-preserver NPM

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 in src/index.html

It's important that this script ends up inserted after all the pre-rendered elements, but before the Angular script tags that the Angular builder inserts.

<body>
  <myapp-root></myapp-root>
  <script type="text/javascript">
    if (!window.__preservedElementsMap__) {
      window.__preservedElementsMap__ = Array.prototype.reduce.call(
        document.querySelectorAll('preserve-elements'),
        (prev, curr, i) => {
          let key = curr.getAttribute('__elPreserveKey');
          return {
            ...prev,
            [key]: curr,
          };
        },
        {}
      );
    }
  </script>
</body>

Step 5: Add the `PreserveElementsComponent` around Components to Preserve and Reinsert

You must provide a unique key to the component, which will be used to track the element internally.

<preserve-elements [key]="'top-sidebar-recommendations'"> </preserve-elements>

tslib

@everything-registry/sub-chunk-1136 @infinitebrahmanuniverse/nolb-angular-s @zalastax/nolb-angular-s

1.0.0

3 years ago