Angular Universal - 仅适用于爬虫机器人

Question

我在我的应用程序中使用 Angular Universal，但是当页面加载（服务器版本和实际应用程序之间的转换）时，我有一些奇怪的闪烁。并且它不适用于我的具有 Guards 的路线（例如用户帐户页面）。

我只需要 SSR 来进行 SEO...那么也许有一种方法可以仅将 SSR 用于爬虫机器人？并为用户提供经典的 Angular 应用程序？

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

谢谢 ！

Answer 1

Transfer State我会告诉您您需要在应用程序中使用什么。

这里https://github.com/wizardnet972/universal-seed看到这个repo，那里正在使用传输状态，

您需要复制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 {

}

有关转移状态的更多信息，另请查看https://github.com/AngularClass/angular-universal-transfer-state

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

角度通用应用程序性能、APP_BOOTSTRAP_LISTENER、闪烁