title: Angular Async Factory Provider
body: <p>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.</p>
  
  <p>However, when the provider injects the <code>TestService</code> into the <code>TestComponent</code>, the type at runtime is <code>ZoneAwarePromise</code>.  I need a way to have the provider automatically "await" the promise before it injects the service into the component.</p>
  
  <p>Service</p>
  
  <pre><code>export class TestService {
   public test() {
     return 123;
   }
  }
  </code></pre>
  
  <p>Provider and Factory</p>
  
  <pre><code>export function testFactory(auth: any, temp: any) {
    return new Promise((res, rej) =&gt; {
      res(new TestService());
    });
  }
  
  export let testProvider =
  {
    provide: TestService,
    useFactory: testFactory,
    deps: []
  };
  </code></pre>
  
  <p>App Module</p>
  
  <pre><code>providers: [
      testProvider
  ]
  </code></pre>
  
  <p>TestComponent</p>
  
  <pre><code>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"
      }
  }
  </code></pre>