Angular2, browser back button, observables, and change detection

I am building an app in angular2 and I'm having a problem with the browser back button and change detection with observables.

My component implements OnActivate and in the routerOnActivate it uses a service that calls my APIs to load the data to display on the page.

So my problem comes if I use the browser back button to go back to another page the route change event fires properly and my component gets initialized and the routerOnActivate function is called, the service gets called and retrieves the data properly but I get a blank page where my component output should be.

This only happens when using the browser back button. If I go directly to the page via the URL set up in RouteConfig it works fine. If I click a link that navigates to that route it works fine. Only if I use the back/forward buttons on the browser am I seeing this issue.

I know this has something to do with the change detection system because if I inject the ChangeDetectorRef into my component and subscribe to the observable returned by the service and in the success handler call ChangeDetectorRef.detectChanges then the page work in all scenarios including using the back/forward buttons.

Anyone run into this issue and could provide some insight for me?

I will try to see if I can create a plunker to demonstrate. I imagine I should not need to manually invoke change detection so I'm not sure if there is some kind of bug or if I am doing something incorrectly.

Example of one of my components:

    "use strict";

    // import Angular 2
    import {Component, Inject, OnInit, ChangeDetectorRef} from "angular2/core";
    import {RouteParams, Router, Location, CanReuse, ComponentInstruction, OnActivate} from "angular2/router";
    import {SitePage} from "../../core/models/site-page";
    import {EntityRetrievalService} from "../../core/services/entity-retrieval.service";
    import {FindResult, FinderService} from "../../core/services/finder.service";
    import {Loader, LoaderService, LoaderComponent} from "../../components/loader/loader";
    import {NotFound} from "../../components/not-found/not-found";
    import {LinkIcon} from "../../components/link-icon/link-icon";

    @Component({
        selector: "page-site-page",
        templateUrl: "pages/site-page/site-page.template.html",
        directives: [LoaderComponent, NotFound, LinkIcon],
      providers: [LoaderService]
    })
    export class SitePageComponent implements OnActivate {
      public sitePage : SitePage = new SitePage();
        public pageLoader: Loader;

        constructor(
            protected routeParams : RouteParams,
            @Inject("SitePageService") protected sitePageService: EntityRetrievalService,
            protected finderService: FinderService,
            protected loaderService: LoaderService,
            protected router: Router,
        protected location: Location,
            private changeDetector: ChangeDetectorRef) {}

        routerOnActivate() {
            this.loadPage(this.routeParams.get("slug"));
        }

        loadPage(slug:string) {
            this.pageLoader = this.loaderService.create();
            this.finderService.find("site-pages", {
                    slug: slug
                })
                .subscribe(
                    (result:FindResult) => {
                        this.sitePageService.getById(result.id)
                      .subscribe(
                                (res : SitePage) => {
                            this.sitePage = res;
                                    this.pageLoader.success();
                                    this.changeDetector.detectChanges();
                          },
                                (err:any) => {
                                    this.pageLoader.error();
                        }
                            );
                    },
                    (err:any) => {
                        this.pageLoader.error();
                    }
                );
        }
    }