如何避免使用 Angular Universal 应用程序闪烁？答案

【问题标题】：How to avoid flickering with Angular Universal app?如何避免使用 Angular Universal 应用程序闪烁？
【发布时间】：2019-10-08 10:52:44
【问题描述】：

我有一个带有 SSR（Angular Universal）的 Angular 应用程序，在路由器中配置了 initialNavigation: 'disabled'，并在 AppModule 中注入了 APP_INITIALIZER 的服务，该服务从 API 获取数据，然后路由器手动执行 initialNavigation来自此服务。

此外，接收到的数据与PersistenceService 一起存储，它从组件中的路由解析器获取，以便在加载组件之前使用此数据进行另一个 API 调用。

问题是如果我在路由器中有initialNavigation: 'disabled'，网页会加载SSR版本，轻弹然后加载客户端版本。

AppModule

export function getAreas(areaService: AreaService) {
    return (): Promise<any> => { 
        return areaService.getAreas();
    }
}
...
providers: [
        { provide: APP_INITIALIZER, useFactory: getAreas, deps: [AreaService], multi: true}
    ],

区域服务

getAreas(): Promise<any> {

        const router = this.injector.get(Router);

        const promise = this.contentService.getAreas()
            .toPromise()
            .then(data => {
                this.memory.set('areas', data);

...
router.initialNavigation();

@Injectable({
    providedIn: 'root'
})
export class PlanCategoryResolver implements Resolve<any> {
    constructor(
        private contentService: ContentService,
        private router: Router,
        private memory: MemoryService
    ) { }

    resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<any> {

        return this.contentService.getCategoryPlans(this.memory.get('areas'));
    }
}

PersistenceService 在 MemoryService 内部使用。

所以我需要避免闪烁，并且路由解析器在加载页面之前获取数据。因为我需要在解析器中使用此数据进行另一个 API 调用。如果initialNavigation 不是enabled，则会发生闪烁。

如何避免闪烁并保留APP_INITIALIZER服务的数据以获取路由解析器数据？

【问题讨论】：

标签： angular server-side-rendering

【解决方案1】：

Angular 文档状态。 https://angular.io/api/router/ExtraOptions

启用或禁用之一。当设置为启用时，初始导航在创建根组件之前开始。引导程序被阻止，直到初始导航完成。该值是服务器端渲染工作所必需的。

如果有任何方法不需要在 initialNavigation 之前调用，我会探索该选项。如果您需要在 initialNavigation 之前调用，您可能可以在服务器端渲染发生之前使用 express 提供者启动 angular ssr。当您调用引擎时，您可以使用中间件和提供程序来执行此操作。

ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      { provide: 'data', useFactory: () => dataFromMiddleware, deps: [] }
    ]
  });

【讨论】：