I would like to set up a factory that does async work to return a service, and then provide that factory to a factory provider to provide that service to a component when it loads.
However, when the provider injects the TestService
into the TestComponent
, the type at runtime is ZoneAwarePromise
. I need a way to have the provider automatically "await" the promise before it injects the service into the component.
Service
export class TestService {
public test() {
return 123;
}
}
Provider and Factory
export function testFactory(auth: any, temp: any) {
return new Promise((res, rej) => {
res(new TestService());
});
}
export let testProvider =
{
provide: TestService,
useFactory: testFactory,
deps: []
};
App Module
providers: [
testProvider
]
TestComponent
import { Component, OnInit } from '@angular/core';
import { TestService } from './Test';
@Component({
selector: 'app-test'
})
export class TestComponent implements OnInit {
constructor(private testService: TestService) { }
async ngOnInit() {
console.log(this.testService.test()); // fails because the type of this.testService at runtime is "ZoneAwarePromise" instead of "TestService"
}
}