SSR-Angular Universal 9将我的根加载两次并挂起

如何解决SSR-Angular Universal 9将我的根加载两次并挂起

我试图找出为什么我的代码使用Angular 9 SSR两次绑定root。

我尝试了eventReplayer.replayAll（）技巧，但仍然被卡住，我注意到当我最终滚动到页面时，我已经正确加载了正确的根目录，而另一个被删除了（ng-non-bindable ），因此我删除了PrebootModule只是为了缩小问题的范围，并且在我的dom中扎根了，但该应用程序无法正常运行。

app.component.ts

BrowserModule.withServerTransition({appId: 'dcaa'}),PrebootModule.withConfig({appRoot: 'dcaa-root'}),.
.
.
{
      provide: APP_INITIALIZER,useFactory: function (document: HTMLDocument,platformId: Object): Function {
        return () => {
          if (isPlatformBrowser(platformId)) {
            const dom = getDOM();
            const styles: any[] = Array.prototype.slice.apply(document.querySelectorAll('style[ng-transition]'));
            styles.forEach(el => {
              // Remove ng-transition attribute to prevent Angular appInitializerFactory
              // to remove server styles before preboot complete
              el.removeAttribute('ng-transition');
            });
            document.addEventListener('PrebootComplete',() => {
              // After preboot complete,remove the server scripts
              setTimeout(() => styles.forEach(el => dom.remove(el)));
            });
          }
        };
      },deps: [DOCUMENT,PLATFORM_ID],multi: true
    }

app.routes.ts

imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'disabled',relativeLinkResolution: 'corrected',preloadingStrategy: PreloadAllModules,initialNavigation: 'enabled'
  }),

app.server.module.ts

imports: [
    AppModule,ServerModule,ServerTransferStateModule,FlexLayoutServerModule
  ],

main.ts

document.addEventListener('DOMContentLoaded',() => {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
});

解决方法

当我尝试在浏览器端的ngAfterViewInit期间尝试操作DOM时，我也遇到了breboot的问题，这导致PrebootComplete无法正确启动，因为DOM已更改。

解决方法是在组件中注入 EventReplayer ：

import { EventReplayer } from 'preboot';

constructor(
    @Inject(PLATFORM_ID) private platformId: any,private replayer: EventReplayer
  )

然后重播预引导事件：

ngAfterViewInit() {
    if (isPlatformBrowser(this.platformId)) {
      // ....
      // Manipulate your DOM here 
      // ....

      this.replayer.replayAll()      
    }
  }