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 {}