Why do my angular2 components get re-instantiated each time I change the route?
<p>I am trying to put together a demo app of <strong>Angular 2</strong> + Rx.JS 5/Next.</p>

<p>I noticed that my components are re-instantiated each time I switch the route. </p>

<p>Here is the code for the root app:</p>

<pre class="lang-ts prettyprint-override"><code>import {bootstrap}    from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component.ts';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]);
</code></pre>

<p>Here is the code for the root component:</p>

<pre class="lang-ts prettyprint-override"><code>import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {FirstComponent} from './app.first-component.ts';
import {SecondComponent} from './app.second-component.ts';
import {AppService} from "./app.services.ts";


@Component({
    selector: 'my-app',
    providers: [AppService, FirstComponent, SecondComponent],
    directives: [FirstComponent, SecondComponent, ROUTER_DIRECTIVES],
    template: `&lt;h1&gt;An Angular 2 App&lt;/h1&gt;
               &lt;a [routerLink]="['First']"&gt;first-default&lt;/a&gt; 
               &lt;a [routerLink]="['Second']"&gt;second&lt;/a&gt; 
               &lt;router-outlet&gt;&lt;/router-outlet&gt;`
})
@RouteConfig([
    {path: '/', name: 'First', component: FirstComponent, useAsDefault: true},
    {path: '/second', name: 'Second', component: SecondComponent}
])
export class AppComponent {
}
</code></pre>

<p>Then the code for the first component (mapped to <code>/</code>):</p>

<pre class="lang-ts prettyprint-override"><code>import {Component, OnInit, NgZone} from "angular2/core";
import {AppService} from "./app.services.ts";
import 'rxjs/Rx';


@Component({
    selector: 'my-first',
    template: `
&lt;div&gt;
    &lt;ul&gt;
        &lt;li *ngFor="#s of someStrings"&gt;
           a string: {{ s }}
        &lt;/li&gt;
    &lt;/ul&gt;
 &lt;/div&gt;`
})
export class FirstComponent implements OnInit {

    zone:NgZone;

    constructor(private appService:AppService) {
        console.log('constructor', 'first');
        this.zone = new NgZone({enableLongStackTrace: false});
    }

    someStrings:string[] = [];

    ngOnInit() {
        console.log('ngOnInit', 'first');
        this.appService.refCounted.subscribe(
            theStrings=&gt; {
                this.zone.run(() =&gt;this.someStrings.push(...theStrings));
            },
            error=&gt;console.log(error)
        );
    }
}
</code></pre>

<p>And the second component (mapped to <code>/second</code>):</p>

<pre class="lang-ts prettyprint-override"><code>import {Component, OnInit, NgZone} from "angular2/core";
import {AppService} from "./app.services.ts";

@Component({
    selector: 'my-second',
    template: `
&lt;div&gt;
    &lt;ul&gt;
        &lt;li *ngFor="#s of someStrings"&gt;
           a string: {{ s }}
        &lt;/li&gt;
    &lt;/ul&gt;
 &lt;/div&gt;`
})
export class SecondComponent implements OnInit {

    zone:NgZone;

    constructor(private appService:AppService) {
        console.log('constructor', 'second');
        this.zone = new NgZone({enableLongStackTrace: false});
    }

    someStrings:string[] = [];

    ngOnInit() {
        console.log('ngOnInit', 'second');
        this.appService.refCounted.subscribe(
            theStrings=&gt; {
                this.zone.run(() =&gt;this.someStrings.push(...theStrings));
            },
            error=&gt;console.log(error)
        );
    }
}
</code></pre>

<p>And finally the app service (slightly less relevant to this question):</p>

<pre class="lang-ts prettyprint-override"><code>import {Injectable} from "angular2/core";
import {Observable} from "rxjs/Observable";
import {Subject} from "rxjs/Subject";
import 'rxjs/Rx';


@Injectable()
export class AppService {

    constructor(){
        console.log('constructor', 'appService');
    }

    someObservable$:Observable&lt;string[]&gt; = Observable.create(observer =&gt; {
        const eventSource = new EventSource('/interval-sse-observable');
        eventSource.onmessage = x =&gt; observer.next(JSON.parse(x.data));
        eventSource.onerror = x =&gt; observer.error(console.log('EventSource failed'));

        return () =&gt; {
            eventSource.close();
        };
    });

    subject$ = new Subject();

    refCounted = this.someObservable$.multicast(this.subject$).refCount();

    someMethod_() {
        let someObservable$:Observable&lt;string[]&gt; = Observable.create(observer =&gt; {
            const eventSource = new EventSource('/interval-sse-observable');
            eventSource.onmessage = x =&gt; observer.next(JSON.parse(x.data));
            eventSource.onerror = x =&gt; observer.error(console.log('EventSource failed'));

            return () =&gt; {
                eventSource.close();
            };
        });
        return someObservable$;
    }
}
</code></pre>

<p>So in order to debug the instantiation of the <code>First</code> and <code>Second</code> components, I have added a console.log in the constructors/ngOnInit:</p>

<p>and I noticed that each time I change the route by clicking on the links, I get:</p>

<pre class="lang-ts prettyprint-override"><code>constructor first
ngOnInit first

constructor second
ngOnInit second
...
</code></pre>

<p>Can someone please advise whether this is expected behavior? If so how can I get Angular2 to instantiate my components only once?</p>

<p>Note that I have explicitly required that the <code>First</code> and <code>Second</code> components be instantiated at the root-level component by adding a <code>providers</code> array there.</p>

<p>P.S. Here is the github repository for this project: <a href="https://github.com/balteo/demo-angular2-rxjs/tree/WITH-ROUTER" rel="noreferrer">https://github.com/balteo/demo-angular2-rxjs/tree/WITH-ROUTER</a></p>

<p><strong>edit</strong>: </p>

<p>I am still trying to find a solution to this problem. I am getting something wrong with the router or my components. I have pushed the app to github <a href="https://github.com/balteo/demo-angular2-rxjs/commit/cf40c9a1de108667028c66c545ad0755863e647c" rel="noreferrer">here</a> hoping someone can provide advice.</p>