Angular 2 ngOnDestroy is not triggering
<p>Good morning fellows</p>

<p>I've developed a small angular2-client-app which got routes. The routes are created like this:</p>

<blockquote>
  <p>app.routes.ts</p>
</blockquote>

<pre><code>import { provideRouter, RouterConfig } from '@angular/router';
import { ContactComponent } from './components/contact.component/contact.component';
import { Home } from './components/home.component/home.component';
import {StudentRoutes} from './components/student.component/student.routes';
import {LecturerRoutes} from "./components/lecturer.component/lecturer.routes";
import {ProcessRoutes} from "./components/process.component/process.routes";
import {SchoolRoutes} from "./components/school.component/school.routes";

export const routes: RouterConfig = [
    { path: '', component: Home },
    ...ProcessRoutes,
    ...StudentRoutes,
    ...LecturerRoutes,
    ...SchoolRoutes,
    { path: 'contact', component: ContactComponent }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];
</code></pre>

<p>So now my clients can route around from component to component.</p>

<p>All my components are extending one parent-component: base-component.ts</p>

<blockquote>
  <p>base-component.ts</p>
</blockquote>

<pre><code>import { Component, Injectable, Inject, Input, Output, EventEmitter, OnDestroy, OnInit, OnChanges } from '@angular/core';
import { Http, URLSearchParams, Headers, Response, RequestOptions } from '@angular/http';
import { NavigationService } from '../services/navigation-service';
// import {Router } from '@angular/router';
import { ComponentService } from '../services/component-service';
import { MenuItem } from '../models/menu-item';
import { Subscription }   from 'rxjs/Subscription';
import {Broadcaster} from "../services/broadcaster";
import {ScreenSize} from "../models/screen-size";
import {LoaderService} from "../services/loader-service";

@Component({
    selector: 'base-component',
    template: ""
})

@Injectable()
export class BaseComponent implements OnDestroy, OnInit {
    constructor(componentService: ComponentService, 
    protected navigationService: NavigationService, 
    broadcaster: Broadcaster,
    protected loaderSrv:LoaderService, 
    screen:ScreenSize = ScreenSize.TwoColumns) {
        let items = new Array&lt;MenuItem&gt;();
        let parent = componentService.GetParentPath(location.pathname);
        this.navigationService.GetSideNavigation(parent).subscribe((x) =&gt; {
            items = x.map(y =&gt; new MenuItem(y.name, y.url, y.children))
            broadcaster.broadcast("sideNavigation", items[0].children);
        });
        broadcaster.broadcast("screenSize", screen);
    }

  ngOnDestroy(){
    this.loaderSrv.start();
  }

  ngOnInit(){
    this.loaderSrv.stop(); 
  }
}
</code></pre>

<p>Every time the user changes the route, he should first hit the <strong>ngOnDestroy</strong> Method, because my object gets cleared out. and after, it should hit the <strong>ngOnInit</strong> Method, because we just created a new object by routing to it.</p>

<p>The problem:
It never triggers the <strong>ngOnDestroy</strong> Method... He does trigger the ngOnInit-Method, but never ngOnDestroy...</p>

<p>Here is a snippet out of my package.json so you can check my angular2 versions:</p>

<pre><code>"@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.3"
</code></pre>

<p>Would be great if somebody could give me a good tip.</p>

<p>Peace out!</p>