How to avoid flickering with Angular Universal app?

I have an Angular app with SSR (Angular Universal) configured with initialNavigation: 'disabled' in Router and with a Service injected with APP_INITIALIZER in the AppModule that gets data from an API and then the Router execute initialNavigation manually from this Service.

Furthermore the data received is stored with PersistenceService and It gets from route resolvers in a component to do another API call with this data before load the component.

The problem is that If I have initialNavigation: 'disabled' in the Router, the web loads SSR version, flick and then loads client version.

AppModule

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



AreaService

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 is used inside MemoryService.
​

So I need avoid the flickering and the route resolver gets the data before load the page. Because I need to do another API call with this data in the resolver. If the initialNavigation is not enabled, the flickering happens.

What can I do to avoid the flickering and keep the data of the APP_INITIALIZER Service to get the route resolver data?

Continue reading...