title: Angular 2 ngOnDestroy is not triggering
body: <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>