Angular 7 SSR第一次加载两次

Question

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

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

也就是说，我在不同的论坛、帖子、github 问题等中阅读了很多关于此的内容，但是我无法找到任何解决方案。

我尝试将main.ts 更改为：

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

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

@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

我遇到了同样的问题，我的解决方案是只为爬虫（google、yahoo、facebook...）启用 ssr。

// server.ts
// All regular routes use the Universal engine
server.get('*', (req, res) => {
  // serve ssr only to web crawlers
  if((/(google|bing|yahoo|slurp|facebot|duckduck)/gi).test(req.headers['user-agent'])){
      res.render(indexHtml, {
        req,
        providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}]
    });
  }
  else{
    res.sendFile(join(distFolder, 'index.html'));
  }
});

Answer 2

实际上闪烁的发生是因为您的应用程序的服务器端首先由浏览器加载，然后客户端随后加载。因此，我实施的一个快速解决方法是仅在服务器端的登录页面上添加“显示：无”。

要实现，请将您的主要组件包装在标签中，并向其添加条件显示子句。我建议您仅在您的目标网页上执行此操作。使用 bootstrap 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) {

  }
}

就像我提到的，它是一种真正有效的解决方法。