时间戳

首页 > 解决方案 > Angular 7 SSR第一次加载两次

angular - Angular 7 SSR第一次加载两次

问题描述

我有几个内置的站点Angular 7以SSR进行SEO改进。所有应用程序本身都很好，但是总是会发生这种情况，无论是第一次还是执行硬刷新时，都会出现这个小信号，所有内容都会显示出来，然后网站本身就会突然“重新加载”。

's 的所有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 标志。

我不确定我是否可以在这里尝试其他任何东西或设置任何“特殊”的东西，但是没有延迟或隐藏导致导航少一点的实际呈现页面真的很好友谊赛。

请注意，这只是在首次加载、首次加载或硬刷新时。导航的其余部分绝对没问题。

标签： angularangular-universalserver-side-rendering

解决方案

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

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

  }
}

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

推荐阅读