fix: make Preboot work with ngUpgrade

When AngularJS is used in an Angular app via ngUpgrade and Preboot is added
with buffering enabled, by default AngularJS will compile both app roots
(Angular would compile the first one only), leading - in turn - to Angular's
AppComponent being rendered twice, in both roots. That breaks the whole Preboot
functionality.

Adding the ng-non-bindable attribute to the server-rendered node works around
this difference in behavior.

README has a new section on how to manually trigger replaying events for
setups without bootstrap components, e.g. the canonical setup for ngUpgrade.

Fixes #67

Author: mgol

README.md

@@ -148,6 +148,56 @@ var eventSelectors = [
 ];
 ```
 
+#### Using with manual bootstrap (e.g. with ngUpgrade)
+
+Preboot registers its reply code at the `APP_BOOTSTRAP_LISTENER` token which is called by Angular for every component that is bootstrapped. If you don't have the `bootstrap` property defined in your `AppModule`'s `NgModule` but you instead use the `ngDoBootrap` method (which is done e.g. when using ngUpgrade) this code will not run at all.
+
+To make Preboot work correctly in such a case you need to specify `noReplay: true` in the Preboot options and replay the events yourself. That is, import `PrebootModule` like this:
+
+```typescript
+PrebootModule.withConfig({
+  appRoot: 'app-root',
+  noReplay: true,
+})
+```
+
+and replay events in `AppComponent` like this:
+
+```typescript
+import { isPlatformBrowser } from '@angular/common';
+import { Component, OnInit, PLATFORM_ID, Inject, ApplicationRef } from '@angular/core';
+import { Router } from '@angular/router';
+import { filter, take } from 'rxjs/operators';
+import { EventReplayer } from 'preboot';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+})
+export class AppComponent implements OnInit {
+  constructor(
+    private router: Router,
+    @Inject(PLATFORM_ID) private platformId: string,
+    private appRef: ApplicationRef,
+    private replayer: EventReplayer,
+  ) {}
+
+  ngOnInit() {
+    this.router.initialNavigation();
+    if (isPlatformBrowser(this.platformId)) {
+      this.appRef.isStable
+        .pipe(
+          filter(stable => stable),
+          take(1),
+        ).subscribe(() => {
+        this.replayer.replayAll();
+      });
+    }
+  }
+}
+``` 
+
 #### PrebootComplete
 
 When you are manually replaying events, you often will want to know when Preboot

src/lib/api/event.recorder.spec.ts

@@ -32,6 +32,16 @@ describe('UNIT TEST event.recorder', function() {
       const actual = createBuffer(root);
       expect(actual).toBe(clientNode as HTMLElement);
     });
+
+    it('should add the "ng-non-bindable" attribute to serverNode', function () {
+      const root = <ServerClientRoot> {
+        serverSelector: 'div',
+        serverNode: getMockElement()
+      };
+
+      createBuffer(root);
+      expect(root.serverNode!.hasAttribute('ng-non-bindable')).toBe(true);
+    });
   });
 
   describe('getSelection()', function () {

src/lib/api/event.recorder.ts

@@ -330,6 +330,9 @@ export function createBuffer(root: ServerClientRoot): HTMLElement {
   // insert the client node before the server and return it
   serverNode.parentNode.insertBefore(rootClientNode, serverNode);
 
+  // mark server node as not to be touched by AngularJS - needed for ngUpgrade
+  serverNode.setAttribute('ng-non-bindable', '');
+
   // return the rootClientNode
   return rootClientNode;
 }

src/lib/common/preboot.mocks.ts

@@ -16,9 +16,22 @@ export function getMockOptions(): PrebootOptions {
 
 export function getMockElement(): Element {
   return {
+    ___attributes: new Map<string, string>(),
     cloneNode: () => { return { style: {} }; },
     parentNode: {
       insertBefore: function () {}
+    },
+    hasAttribute(key: string) {
+      return this.___attributes.has(key);
+    },
+    getAttribute(key: string) {
+      return this.___attributes.get(key);
+    },
+    setAttribute(key: string, value: string) {
+      this.___attributes.set(key, value);
+    },
+    removeAttribute(key: string) {
+      this.___attributes.delete(key);
     }
   } as any as Element;
 }