title: How to avoid flickering with Angular Universal app?
body: <p>I have an Angular app with SSR (Angular Universal) configured with <code>initialNavigation: 'disabled'</code> in Router and with a Service injected with <code>APP_INITIALIZER</code> in the <code>AppModule</code> that gets data from an API and then the Router execute <code>initialNavigation</code> manually from this Service.</p>
  
  <p>Furthermore the data received is stored with <a href="https://www.npmjs.com/package/angular-persistence" rel="nofollow noreferrer"><code>PersistenceService</code></a> and It gets from route resolvers in a component to do another API call with this data before load the component.</p>
  
  <p>The problem is that If I have <code>initialNavigation: 'disabled'</code> in the Router, the web loads SSR version, flick and then loads client version.</p>
  
  <p><em>AppModule</em></p>
  
  <pre><code>export function getAreas(areaService: AreaService) {
      return (): Promise&lt;any&gt; =&gt; { 
          return areaService.getAreas();
      }
  }
  ...
  providers: [
          { provide: APP_INITIALIZER, useFactory: getAreas, deps: [AreaService], multi: true}
      ],
  
  </code></pre>
  
  <p><em>AreaService</em></p>
  
  <pre><code>getAreas(): Promise&lt;any&gt; {
  
          const router = this.injector.get(Router);
  
          const promise = this.contentService.getAreas()
              .toPromise()
              .then(data =&gt; {
                  this.memory.set('areas', data);
  
  ...
  router.initialNavigation();
  </code></pre>
  
  <pre><code>@Injectable({
      providedIn: 'root'
  })
  export class PlanCategoryResolver implements Resolve&lt;any&gt; {
      constructor(
          private contentService: ContentService,
          private router: Router,
          private memory: MemoryService
      ) { }
  
      resolve(
          route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot
      ): Observable&lt;any&gt; {
  
          return this.contentService.getCategoryPlans(this.memory.get('areas'));
      }
  }
  </code></pre>
  
  <blockquote>
    <p>PersistenceService is used inside MemoryService.</p>
  </blockquote>
  
  <p>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 <code>initialNavigation</code> is not <code>enabled</code>, the flickering happens.</p>
  
  <p>What can I do to avoid the flickering and keep the data of the <code>APP_INITIALIZER</code> Service to get the route resolver data?</p>