Angular 服务器到客户端转换的通用样式 FOUC

Question

我的通用应用程序有问题，当服务器端应用程序换成客户端应用程序时，有一段时间组件没有样式，这些组件是我为该页面路由的组件的一部分.这会导致页面正确加载，然后在自行解决之前暂时显示一闪而过的无样式内容 (FOUC) 并且看起来很糟糕。

我的网站页眉和页脚组件的样式在整个过程中看起来都很好，但加载到 <router-outlet> 元素中的组件没有正确的样式。

我正在使用 Preboot 来管理服务器 > 客户端转换并且不执行任何超出标准配置的操作。我尝试过使用 @ngx-universal/state-transfer 和 @ngx-cache 库，但我认为它们不是我需要的。

我正在使用延迟加载的路由，但我已经尝试删除它们并且错误是相同的。我也尝试在我的路由配置中设置 { initialNavigation: 'enabled' }。

我使用 webpack 构建我的服务器端应用程序，并使用 Angular CLI 构建客户端应用程序，主要基于 this project，并且我使用 AOT 编译器。任何想法将不胜感激，谢谢！

Answer 1

所以我最终采用的解决方案是创建一个 StyleStateTransferService，它利用 @ngx-universal/state-transfer 库。

在服务器端应用程序中，我将 angular 样式从头部拉出并将它们添加到状态传输服务中。在客户端应用程序中，我从传输状态中获取样式并将它们添加到头部。一旦 Angular 完成引导程序，我就会检查并删除我添加的那些，这样就没有重复项了。

我不知道这是否是最好的解决方案，也许有人有更好的解决方案，我最初希望只是预引导中缺少一些配置，但事实并非如此。

服务：

@Injectable()
export class StyleStateTransferService {
  document: any;
  window: Window;
  renderer: Renderer2;
  ngStyleId = 'ng_styles';

  constructor(private stateTransferService: StateTransferService,
              @Inject(DOCUMENT) document: any,
              private winRef: WindowRef,
              private rendererFactory: RendererFactory2) {
    this.window = winRef.nativeWindow;
    this.document = document;
    this.renderer = rendererFactory.createRenderer(this.document, null);
  }

  addStylesToState() {
    const styles: string[] = this.document.head.children
      // elements have a weird structure on the server
      // this filters to style tags with the ng-transition attribute that have content
      .filter(el =>
        el.name === 'style' && el.attribs['ng-transition'] && el.firstChild && el.firstChild.data)
      // extract the css content of the style tags
      .map(el => el.firstChild.data.replace(/\n/g, ' '));

    this.stateTransferService.set(this.ngStyleId, styles);
    this.stateTransferService.inject();
  }

  injectStylesFromState() {
    const styles = _.get(this.window, `${DEFAULT_STATE_ID}.${this.ngStyleId}`, []);
    styles.forEach(content => {
      const styleEl = this.renderer.createElement('style');
      // set this attribute so we can remove them later
      this.renderer.setAttribute(styleEl, 'ng-state-transfer', null);
      this.renderer.setProperty(styleEl, 'innerHTML', content);
      this.renderer.appendChild(this.document.head, styleEl);
    });
  }

  cleanupInjectedStyles() {
    Array.from(<HTMLElement[]>this.document.head.children)
      .filter(htmlEl => htmlEl.tagName === 'STYLE' && htmlEl.hasAttribute('ng-state-transfer'))
      .forEach(styleEl => this.renderer.removeChild(this.document.head, styleEl));
}

在服务器和浏览器模块中使用它（清理发生在应用程序组件中，但似乎不值得展示）：

export class AppServerModule {
  constructor(private appRef: ApplicationRef,
              private styleStateTransferService: StyleStateTransferService) {
    // waits until the app has fully initialised before adding the styles to the state
    this.appRef.isStable
      .filter(isStable => isStable)
      .first()
      .subscribe(() => {
        this.styleStateTransferService.addStylesToState();
      });
  }
}

export class AppBrowserModule {
  constructor(private styleStateTransferService: StyleStateTransferService) {
    this.styleStateTransferService.injectStylesFromState();
  }
}

Angular 服务器到客户端转换的通用样式 FOUC

Angular universal styling FOUC on server to client transition

fouc

server-side-rendering

angular-universal

angular