title: Returning empty promise
body: <p>I'm implementing this <a href="https://stackblitz.com/edit/angular-ypqkcf-eduhze?file=app%2Fprogress-spinner%2Fprogress-spinner.component.ts" rel="noreferrer">button</a> in my app.</p>
  
  <p>In my button component I have:</p>
  
  <pre><code>  @Input() callback: () =&gt; Promise&lt;null&gt;;
    onClick() {
      this.spinnerService.show();
      this.callback().then(() =&gt; {
        this.spinnerService.hide();
      }, () =&gt; {
        this.spinnerService.hide();
      });
    }
  </code></pre>
  
  <p>(I don't use async / await because the "tech lead" doesn't want me too) </p>
  
  <p>The component template:</p>
  
  <pre><code>&lt;my-button [callback]="doSomething"&gt;
  &lt;/my-button&gt;
  </code></pre>
  
  <p>Everything works fine when I pass this kind of code to the component's input:</p>
  
  <pre><code>doSomething = () =&gt; {
    return myService.doSomething()
      .toPromise()
      .then((response) =&gt; console.log('promise resolved'));
  }
  </code></pre>
  
  <p>But I need to break from this function earlier:</p>
  
  <pre><code>doSomething() {
    if (condition) {
      return;
    }
    return myService.doSomething()
      .toPromise()
      .then((response) =&gt; console.log('promise resolved'));
  }
  </code></pre>
  
  <p>I get</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'then' of undefined</p>
  </blockquote>
  
  <p>I've tried forcing a promise with the same result</p>
  
  <pre><code>  if (condition) {
      return Promise.resolve(null);
      // or
      return new Promise((resolve) =&gt; { resolve(null); });
    }
  </code></pre>