title: SSR - Angular Universal 9 loading my root twice and hanging
body: <p>I'm trying to find why my code is binding root two times using Angular 9 SSR.</p>
  <p>I tried eventReplayer.replayAll() trick but I'm still stuck, I noticed when I'm scrolling into the page finally I'm getting the the proper root loaded perfectly and the other one removed (ng-non-bindable), so I removed <code>PrebootModule</code> just to narrow the issue and I got one root in my dom but the application won't run properly.</p>
  <p><a href="https://i.stack.imgur.com/ustEO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ustEO.png" alt="enter image description here" /></a></p>
  <p><strong>app.component.ts</strong></p>
  <pre><code>BrowserModule.withServerTransition({appId: 'dcaa'}),
  PrebootModule.withConfig({appRoot: 'dcaa-root'}),
  .
  .
  .
  {
        provide: APP_INITIALIZER,
        useFactory: function (document: HTMLDocument, platformId: Object): Function {
          return () =&gt; {
            if (isPlatformBrowser(platformId)) {
              const dom = getDOM();
              const styles: any[] = Array.prototype.slice.apply(document.querySelectorAll('style[ng-transition]'));
              styles.forEach(el =&gt; {
                // Remove ng-transition attribute to prevent Angular appInitializerFactory
                // to remove server styles before preboot complete
                el.removeAttribute('ng-transition');
              });
              document.addEventListener('PrebootComplete', () =&gt; {
                // After preboot complete, remove the server scripts
                setTimeout(() =&gt; styles.forEach(el =&gt; dom.remove(el)));
              });
            }
          };
        },
        deps: [DOCUMENT, PLATFORM_ID],
        multi: true
      }
  </code></pre>
  <p><strong>app.routes.ts</strong></p>
  <pre><code>imports: [RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'disabled',
      relativeLinkResolution: 'corrected',
      preloadingStrategy: PreloadAllModules,
      initialNavigation: 'enabled'
    }),
  </code></pre>
  <p><strong>app.server.module.ts</strong></p>
  <pre><code>imports: [
      AppModule,
      ServerModule,
      ServerTransferStateModule,
      FlexLayoutServerModule
    ],
  </code></pre>
  <p><strong>main.ts</strong></p>
  <pre><code>document.addEventListener('DOMContentLoaded', () =&gt; {
    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch(err =&gt; console.log(err));
  });
  </code></pre>