Angular 2 ngOnDestroy is not triggering

Question

Good morning fellows

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

app.routes.ts

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)
];

So now my clients can route around from component to component.

All my components are extending one parent-component: base-component.ts

base-component.ts

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<MenuItem>();
        let parent = componentService.GetParentPath(location.pathname);
        this.navigationService.GetSideNavigation(parent).subscribe((x) => {
            items = x.map(y => 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(); 
  }
}

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

The problem: It never triggers the ngOnDestroy Method... He does trigger the ngOnInit-Method, but never ngOnDestroy...

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

"@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"

Would be great if somebody could give me a good tip.

Peace out!

Answer 1

Finally got it...

The error was in the HTML.

I used the element a with href to route through the sites. That was false! The right way is to use Routerlink

<a href="/site">Site</a>

<a [RouterLink]="['/site']">Site</a>

Than all live cycle hooks will work again!