How can I "monkey patch" an Observable for Zone.js?
<p>I'm creating an Angular 2 component, and Angular's change detection isn't working for me when using a certain Observable pattern. It looks something like this:</p>

<pre><code>    let getResult$ = this.http.get('/api/identity-settings');

    let manager$ = getResult$
        .map((response) =&gt; /* -- create manager object -- */);

    let signinResponse$ = manager$
        .flatMap(manager =&gt; manager.processSigninResponse());

    this.readyToLogin$ = manager$.map(() =&gt; true).startWith(false);
    this.isLoggedIn$ = signinResponse$.map(() =&gt; true).startWith(false);
</code></pre>

<p>Then in my template:</p>

<pre><code>&lt;h1&gt;Ready to Log In: {{readyToLogin$ | async}}&lt;/h1&gt;
&lt;h1&gt;Logged In: {{isLoggedIn$ | async}}&lt;/h1&gt;
</code></pre>

<p>Since the <code>readyToLogin$</code> Observable is based on a synchronous set of operations that happen in response to the <code>http.get()</code> (which Angular "monkey patches" to ensure it knows when it needs to detect changes), the "Ready to Log In" message switches to <code>true</code> at the appropriate time. </p>

<p>However, since <code>processSignInResponse()</code> produces a <code>Promise&lt;&gt;</code>, anything subscribing to the result of <code>flatMap</code> is occurring asynchronously to the http request's completion event. Therefore, it requires manual intervention to notify my component's zone that it needs to check for changes.</p>

<p>How can I wrap the <code>signInResponse$</code> observable in a way that <code>NgZone</code> knows to detect changes after any subscriptions have been resolved?</p>

<h2>Update</h2>

<p>Brandon's answer worked until I updated to RC5, at which point things stopped working again. Turns out <a href="https://github.com/IdentityModel/oidc-client-js/issues/87" rel="noreferrer">the 3rd-party library I was using borked Zone.js</a>. Once that was resolved, there was no need to use a workaround at all--the built-in monkey patching just worked!</p>