[Angular universal] page flicker when client side is loaded

[aitboudad]

This due to the usage of setTimeout, removing it solve the issue

[christopherthielen]

I think the setTimeout is necessary, so the router instance is constructed when the NgModules are configured. I'll take a look.

[aitboudad]

try moving this part to APP_INITIALIZER

[christopherthielen]

@aitboudad are you using ui-router with angular universal? I haven't tried yet. Is there anything I should know about how it works or doesn't work?

[aitboudad]

see #43 (comment) let me know if you need a working example.

Note: I prefer waiting until angular/angular#13822 is done

[aitboudad]

I solved the page flicker by using APP_INITIALIZER:

export function onReady($transition: TransitionService) {
    return () => new Promise(resolve => {
        let eventHooks = [];
        ['onSuccess', 'onError'].map(hook => {
            const unsubscriberEventHook = $transition[hook]({}, (transition) => {
                eventHooks.map(unsubscriber => unsubscriber());
                resolve();
            });
            eventHooks.push(unsubscriberEventHook);
        });
    });
}

@NgModule({
    imports: [ ... ],
    providers: [
        {
            'provide': APP_INITIALIZER,
            'useFactory': onReady,
            'deps': [TransitionService],
            'multi': true,
        },
    ],
    bootstrap: [UIView],
})

[christopherthielen]

@aitboudad did you close this issue because you think it's better to wait for ng 4, or because you solved it manually with ng2? Do you think APP_INITIALIZER is something UI-Router should provide by default? It looks pretty trivial to implement.

[aitboudad]

I think it's better to wait for ng4 :)