title: Angular2 router's navigateByUrl() not calling ngOnInit()
body: <p>I have two Angular mini-apps on the same page. (Long story.) One is a navigation app, and one is the main app. I'm using the latest Angular router, based on <a href="https://github.com/angular/vladivostok" rel="nofollow">angular/vladivostok</a>.</p>
  
  <p>It appears that the Angular router in one app (e.g., nav) does not respond to URL changes instantiated by the other app (e.g., the main app). So I've created a <code>RouterSynchronizer</code><sup>1</sup> class that I provide to both apps. It listens to both routers' <code>NavigationEnd</code> events. When one router (let's call it the "source") has an event, it calls <code>navigateByUrl</code> on the other router (let's call it the "subscriber").</p>
  
  <p>This works fine for the most part. However, it doesn't call <code>ngOnInit</code> on the components of the subscriber.</p>
  
  <p>I've created <a href="http://embed.plnkr.co/apiwvsKPnL8WCoxYH062/" rel="nofollow">a Plunk</a> to demonstrate this, based on the live example from Angular's official <a href="https://angular.io/docs/ts/latest/guide/router.html" rel="nofollow">Routing &amp; Navigation guide</a>. Note that when you click the "Crisis Center" and "Heroes" links in the main app, <code>ngOnInit</code> is not called on the corresponding child components in the nav component. However, when you click those links in the nav component, <code>ngOnInit</code> <em>is</em> called on those child components, but <em>not</em> on the child components of the main app (which results in the lists of heroes/crisis centers being empty).</p>
  
  <p>Any ideas? Thanks!</p>
  
  <p><sup>1</sup> <code>RouterSynchronizer</code> class:</p>
  
  <pre><code>import { Inject } from '@angular/core';
  import { NavigationEnd, Router } from '@angular/router';
  
  interface ISubscriber {
    id: string;
    router: Router;
  }
  
  export class RouterSynchronizer {
    private subscribers: ISubscriber[] = [];
  
    connect(id: string, router: Router): void {
      this.subscribers.push({ id, router });
      this.startPublishing(id, router);
    }
  
    private startPublishing(source: string, router: Router): void {
      router.events.subscribe(route =&gt; {
        if (route instanceof NavigationEnd) {
          this.subscribers.forEach(subscriber =&gt; {
            if (subscriber.id === source || subscriber.router.url === route.urlAfterRedirects) {
              // Prevent infinite loops.
              return;
            }
  
            subscriber.router.navigateByUrl(route.urlAfterRedirects);
          });
        }
      });
    }
  }
  </code></pre>