Angular 7 SSR第一次加载两次

Question

我在Angular 7中建立了几个站点，并在SSR中进行了SEO改进。所有应用程序本身都很好，但是总是会发生第一次或当您执行硬刷新时，会有一个很小的blip，其中显示了所有内容，而站点本身突然变成了“重新加载”。

ngIf的所有可能隐藏组件ngOnInit部分中评估的组件的条件似乎都被忽略，并且还显示了以opacity = 0开头的动画来隐藏HTML元素。

那说我在不同的论坛，帖子，github问题等中读到了很多有关此内容的文章，但是我一直无法获得任何解决方案。

我尝试将main.ts更改为：

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

而不是经典的引导机制，没有乐趣。我已经尝试过在initialNavigation中启用AppRouting的选项，但仍然无法使用：

@NgModule({
    exports: [ RouterModule ],
    imports: [ RouterModule.forRoot(routes, {enableTracing, scrollPositionRestoration: 'enabled', initialNavigation: 'enabled'}) ],
})
export class AppRoutingModule {}

我在这里仔细阅读了我认为可能与之相关的问题：https://github.com/angular/angular-cli/issues/7477，但它终止于对我不起作用的initialNavigation标志。

我不确定是否还有其他可以在这里尝试的方法或要设置的任何“特殊”功能，但最好不要延迟或隐藏实际呈现的页面，这会导致导航成为不太友好。

请注意，这仅在首次加载，首次加载或硬刷新时执行。其余的导航完全没问题。

Answer 1

实际上，由于发生了闪烁，因为应用程序的服务器端首先由浏览器加载，然后又由客户端加载。因此，我实现的一个快速解决方法是仅在服务器端着陆页上添加“ display：none”。

要实现，请将您的主要组件包装在标记中，并为其添加条件显示子句。我建议您仅在目标网页上执行此操作。使用引导程序4，这是您的主布局应如下所示：

app.layout.html

<div  [className]="!display?'d-none':''">
    <app-navbar current_page="post"></app-navbar>
    <router-outlet ></router-outlet>
    <app-footer></app-footer>
</div>

注意[className] =“！display？'d-none'：''”

以及在component.ts文件中：

app.component.ts

import {Component, Inject, OnInit, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';

@Component({
  selector: 'app-layout',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  display = true;
  constructor( @Inject(PLATFORM_ID) private platformId: Object) {
    if (!isPlatformBrowser(this.platformId)) {
      this.display = false;
    }
  }

  ngOnInit() {
  }
  onActivate(event) {

  }
}

就像我提到的那样，它实际上是可行的解决方法。