Question

我正在使用Angular Universal和我的应用程序，但是当页面加载时（我在服务器版本和实际应用程序之间进行转换）时我会有一些奇怪的闪烁。而且我的路线没有使用Guards（用户帐户页面）前）。

我只需要SSR用于搜索引擎优化...所以也许有一种方法只能为爬虫机器人使用SSR？并为用户提供经典的Angular应用程序？

目前，我正在使用Angular Universal存储库中的相同server.ts。

谢谢！

Answer 1

我会告诉你什么，你需要在你的应用中使用Transfer State。

这里https://github.com/wizardnet972/universal-seed看到这个回购，那里正在使用trasfer状态，

您需要复制应用中的shared/tranfer-state文件夹，对以下文件进行更改：

app.browser.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { BrowserTransferStateModule } from '../shared/transfer-state/browser-transfer-state.module';

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({
      appId: 'universal-seed'
    }),
    BrowserTransferStateModule,
    AppModule
  ]
})
export class BrowserAppModule { }

app.server.module.ts

import { NgModule, APP_BOOTSTRAP_LISTENER, ApplicationRef } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ServerTransferStateModule } from '../shared/transfer-state/server-transfer-state.module';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { TransferState } from '../shared/transfer-state/transfer-state';
import { BrowserModule } from '@angular/platform-browser';

export function onBootstrap(appRef: ApplicationRef, transferState: TransferState) {
  return () => {
    appRef.isStable
      .filter(stable => stable)
      .first()
      .subscribe(() => {
        transferState.inject();
      });
  };
}

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({
      appId: 'universal-seed'
    }),
    ServerModule,
    ServerTransferStateModule,
    AppModule
  ],
  providers: [
    {
      provide: APP_BOOTSTRAP_LISTENER,
      useFactory: onBootstrap,
      multi: true,
      deps: [
        ApplicationRef,
        TransferState
      ]
    }
  ]
})
export class ServerAppModule {

}

有关trasfer-state的更多信息，请查看https://github.com/AngularClass/angular-universal-transfer-state

如果您使用angular4，上述解决方案将有效，但如果您正在寻找angular5解决方案，请查看此问题的答案。

angular universal app performance, APP_BOOTSTRAP_LISTENER, flicker

角度通用 - 仅适用于履带式机器人

1 个答案: