feat(UIRouterModule): Add deferInitialRender toggle to forRoot. Waits for initial router transition before bootstrapping the app the initial render.

Author: christopherthielen

src/uiRouterNgModule.ts

@@ -16,24 +16,27 @@ import { ROUTES } from "@angular/router";
 /** @hidden */ export const UIROUTER_STATES       = new InjectionToken("UIRouter States");
 // /** @hidden */ export const ROUTES = UIROUTER_STATES;
 
-export function onTransitionReady(transitionService: TransitionService, plateformId) {
-    if (isPlatformServer(plateformId)) {
-       return () => Promise.resolve();
-    }
-
-    return () => new Promise(resolve => {
-      transitionService.onSuccess({}, resolve);
-      transitionService.onError({}, resolve);
-    });
+// Delay angular bootstrap until first transition is successful, for SSR.
+// See https://github.com/ui-router/angular/pull/127
+export function onTransitionReady(transitionService: TransitionService, root: RootModule[]) {
+  let mod = root[0];
+  if (!mod || !mod.deferInitialRender) {
+    return () => Promise.resolve();
+  }
+
+  return () => new Promise(resolve => {
+    const hook = trans => { trans.promise.then(resolve, resolve); };
+    transitionService.onStart({}, hook, { invokeLimit: 1 });
+  });
 }
 
-export function makeRootProviders(module: StatesModule): Provider[] {
+export function makeRootProviders(module: RootModule): Provider[] {
     return [
         { provide: UIROUTER_ROOT_MODULE,         useValue: module,              multi: true},
         { provide: UIROUTER_MODULE_TOKEN,        useValue: module,              multi: true },
         { provide: ROUTES,                       useValue: module.states || [], multi: true },
         { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: module.states || [], multi: true },
-        { provide: APP_INITIALIZER, useFactory: onTransitionReady, deps: [TransitionService, PLATFORM_ID], multi: true },
+        { provide: APP_INITIALIZER, useFactory: onTransitionReady, deps: [TransitionService, UIROUTER_ROOT_MODULE], multi: true },
     ];
 }
 
@@ -184,6 +187,17 @@ export interface RootModule extends StatesModule {
    * Sets [[UrlRouterProvider.deferIntercept]]
    */
   deferIntercept?: boolean;
+
+  /**
+   * Tells Angular to defer the first render until after the initial transition is complete.
+   *
+   * When `true`, adds an async `APP_INITIALIZER` which is resolved after any `onSuccess` or `onError`.
+   * The initializer stops angular from rendering the root component until after the first transition completes.
+   * This may prevent initial page flicker while the state is being loaded.
+   *
+   * Defaults to `false`
+   */
+  deferInitialRender?: boolean;
 }
 
 /**

test/ngModule/deferInitialRender.spec.ts

@@ -0,0 +1,113 @@
+import { async, inject, TestBed } from '@angular/core/testing';
+import { UIRouterModule } from '../../src/uiRouterNgModule';
+import { UIView } from '../../src/directives/uiView';
+import { memoryLocationPlugin, UIRouter } from '@uirouter/core';
+import { ApplicationInitStatus, Component, NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader } from '@angular/core';
+import { Ng2StateDeclaration } from '../../src/interface';
+
+const timeout = (delay?: number) => new Promise(resolve => setTimeout(resolve, delay));
+const configFn = (router: UIRouter) => router.plugin(memoryLocationPlugin);
+
+@Component({ selector: 'home', template: 'HOME' })
+export class HomeComponent { }
+
+@Component({ selector: 'home', template: '<h1>APP</h1><ui-view></ui-view>' })
+export class AppComponent { }
+
+const setupTests = (deferInitialRender: boolean) => {
+  let resolve;
+  const promise = new Promise<any>(_resolve => resolve = _resolve);
+
+  const homeState: Ng2StateDeclaration = {
+    name: 'home',
+    component: HomeComponent,
+    url: '/home',
+    resolve: [
+      { token: 'data', resolveFn: () => promise },
+    ]
+  };
+
+  const routerModule = UIRouterModule.forRoot({
+    useHash: true,
+    states: [homeState],
+    deferInitialRender: deferInitialRender,
+    config: configFn,
+  });
+
+  TestBed.configureTestingModule({
+    declarations: [HomeComponent, AppComponent],
+    imports: [routerModule],
+    providers: [
+      { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },
+    ]
+  });
+
+  return resolve;
+};
+
+describe('deferInitialRender == false', () => {
+  let resolve, router: UIRouter, status: ApplicationInitStatus;
+  beforeEach(() => {
+    resolve = setupTests(false)
+  });
+
+  beforeEach(inject([UIRouter, ApplicationInitStatus], (_router, _status) => {
+    router = _router;
+    status = _status;
+  }));
+
+  it('should not wait for initial transition', async done => {
+    const { stateService } = router;
+    const fixture = TestBed.createComponent(AppComponent);
+
+    expect(status.done).toBe(false);
+    const goPromise = stateService.go('home');
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(status.done).toBe(false);
+
+    await timeout();
+    expect(status.done).toBe(true);
+
+    resolve();
+    await goPromise;
+    done();
+  });
+});
+
+describe('deferInitialRender == true', () => {
+  let resolve, router: UIRouter, status: ApplicationInitStatus;
+  beforeEach(() => {
+    resolve = setupTests(true)
+  });
+
+  beforeEach(inject([UIRouter, ApplicationInitStatus], (_router, _status) => {
+    router = _router;
+    status = _status;
+  }));
+
+  it('should wait for initial transition', async done => {
+    const { stateService } = router;
+    const fixture = TestBed.createComponent(AppComponent);
+
+    expect(status.done).toBe(false);
+    const goPromise = stateService.go('home');
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(status.done).toBe(false);
+
+    await timeout();
+    resolve();
+
+    await goPromise;
+    expect(status.done).toBe(false);
+
+    await timeout();
+    expect(status.done).toBe(true);
+
+    done();
+  });
+});
+