refactor(upgrade/upgrade_adapter): use `Deferred` helper
Making Angular 1's `$compile` asynchronous by chaining injector promises in linking functions can cause flickering views in applications.
This commit is contained in:
parent
eab7e490c9
commit
d6e5e9283c
|
@ -14,7 +14,7 @@ import {NG1_COMPILE, NG1_INJECTOR, NG1_PARSE, NG1_ROOT_SCOPE, NG1_TESTABILITY, N
|
||||||
import {DowngradeNg2ComponentAdapter} from './downgrade_ng2_adapter';
|
import {DowngradeNg2ComponentAdapter} from './downgrade_ng2_adapter';
|
||||||
import {ComponentInfo, getComponentInfo} from './metadata';
|
import {ComponentInfo, getComponentInfo} from './metadata';
|
||||||
import {UpgradeNg1ComponentAdapterBuilder} from './upgrade_ng1_adapter';
|
import {UpgradeNg1ComponentAdapterBuilder} from './upgrade_ng1_adapter';
|
||||||
import {controllerKey, onError} from './util';
|
import {controllerKey, onError, Deferred} from './util';
|
||||||
|
|
||||||
let upgradeCount: number = 0;
|
let upgradeCount: number = 0;
|
||||||
|
|
||||||
|
@ -326,7 +326,7 @@ export class UpgradeAdapter {
|
||||||
const componentFactoryRefMap: ComponentFactoryRefMap = {};
|
const componentFactoryRefMap: ComponentFactoryRefMap = {};
|
||||||
const ng1Module = angular.module(this.idPrefix, modules);
|
const ng1Module = angular.module(this.idPrefix, modules);
|
||||||
let ng1BootstrapPromise: Promise<any>;
|
let ng1BootstrapPromise: Promise<any>;
|
||||||
let ng1compilePromise: Promise<any>;
|
const ng2BootstrapDeferred = new Deferred();
|
||||||
ng1Module.factory(NG2_INJECTOR, () => moduleRef.injector.get(Injector))
|
ng1Module.factory(NG2_INJECTOR, () => moduleRef.injector.get(Injector))
|
||||||
.value(NG2_ZONE, ngZone)
|
.value(NG2_ZONE, ngZone)
|
||||||
.factory(NG2_COMPILER, () => moduleRef.injector.get(Compiler))
|
.factory(NG2_COMPILER, () => moduleRef.injector.get(Compiler))
|
||||||
|
@ -375,7 +375,6 @@ export class UpgradeAdapter {
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
ng1compilePromise = new Promise((resolve, reject) => {
|
|
||||||
ng1Module.run([
|
ng1Module.run([
|
||||||
'$injector', '$rootScope',
|
'$injector', '$rootScope',
|
||||||
(injector: angular.IInjectorService, rootScope: angular.IRootScopeService) => {
|
(injector: angular.IInjectorService, rootScope: angular.IRootScopeService) => {
|
||||||
|
@ -417,12 +416,11 @@ export class UpgradeAdapter {
|
||||||
next: (_: any) => ngZone.runOutsideAngular(() => rootScope.$evalAsync())
|
next: (_: any) => ngZone.runOutsideAngular(() => rootScope.$evalAsync())
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.then(resolve, reject);
|
.then(ng2BootstrapDeferred.resolve, ng2BootstrapDeferred.reject);
|
||||||
})
|
})
|
||||||
.catch(reject);
|
.catch(ng2BootstrapDeferred.reject);
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
});
|
|
||||||
|
|
||||||
// Make sure resumeBootstrap() only exists if the current bootstrap is deferred
|
// Make sure resumeBootstrap() only exists if the current bootstrap is deferred
|
||||||
const windowAngular = (window as any /** TODO #???? */)['angular'];
|
const windowAngular = (window as any /** TODO #???? */)['angular'];
|
||||||
|
@ -443,7 +441,7 @@ export class UpgradeAdapter {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Promise.all([ng1BootstrapPromise, ng1compilePromise]).then(() => {
|
Promise.all([ng1BootstrapPromise, ng2BootstrapDeferred.promise]).then(() => {
|
||||||
moduleRef.injector.get(NgZone).run(() => {
|
moduleRef.injector.get(NgZone).run(() => {
|
||||||
if (rootScopePrototype) {
|
if (rootScopePrototype) {
|
||||||
rootScopePrototype.$apply = original$applyFn; // restore original $apply
|
rootScopePrototype.$apply = original$applyFn; // restore original $apply
|
||||||
|
|
|
@ -22,3 +22,16 @@ export function onError(e: any) {
|
||||||
export function controllerKey(name: string): string {
|
export function controllerKey(name: string): string {
|
||||||
return '$' + name + 'Controller';
|
return '$' + name + 'Controller';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class Deferred<R> {
|
||||||
|
promise: Promise<R>;
|
||||||
|
resolve: (value?: R|PromiseLike<R>) => void;
|
||||||
|
reject: (error?: any) => void;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.promise = new Promise((res, rej) => {
|
||||||
|
this.resolve = res;
|
||||||
|
this.reject = rej;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue