Question

在制作了不同的模块和拦截器以处理服务器和浏览器请求之后，我正在使用Angular Universal，但是主页仍然加载两次。如何避免这种闪烁。这是我在拦截器中使用的代码

auth-interceptor.ts

const myData = database.map(record => record.amount)

main.ts

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (request.method !== 'GET') {
  return next.handle(request);
}

const key: StateKey<string> = makeStateKey<string>(request.url);

if (isPlatformServer(this.platformId)) {

    return next.handle(request).pipe(tap((event) => {
      this.transferState.set(makeStateKey(request.url), (<HttpResponse<any>> event).body);
    }));
} else {
    const storedResponse: string = this.transferState.get(makeStateKey(request.url), null);
  if (storedResponse) {
    const response = new HttpResponse({body: storedResponse, status: 200});
    this.transferState.remove(key);
    return of(response);
   } else {
    return next.handle(request);
  }
 }
}

Answer 1

在尝试了所有解决方案后，它仍然无法正常工作，但我仍然面临闪烁。那是因为html模板中有一些带有异步的* ngIf或* ngFor。因此，在加载浏览器代码时，它的评估结果为false，并由服务器删除所有预渲染的元素。因此，请确保您使用路由解析器对数据进行预处理，并且不要在html模板中使用任何ngIf 我面临另一个问题，如果有人对此有解决方案，则必须与preBoot一起应用修复程序，请提出建议我的客户端js文件未加载，因为我必须这样做在app.module.ts

PrebootModule.withConfig({ appRoot: 'app-root', replay: false }),

在app.component.ts

中

if (this.isBrowser) { this.replayer.replayAll(); this.appRef.isStable .pipe( takeUntil(this.ngUnsubscribe), filter(stable => stable), ).subscribe(() => { console.log('app is stable now'); this.replayer.replayAll(); }); }

按照我的回答和其他解决方案 https://github.com/angular/angular/issues/23427

完成所有步骤并在拦截器中使用TransferState之后，Angular Universal闪烁（加载两次）

1 个答案: