Angular 2 - Is routing allowed only in child component?

Question

I'm having a main component as the root component

<tracker-module></tracker-module>

Under main component I have sub components like below:

   <header></header>
     <left-navigation></left-navigation>
     <my-app>
     </my-app>
    <footer></footer>

With the above structure, All the sub-components are rendering perfectly the way it should be(as these components does not have routing but just html).

But, I'm not getting to work out the page-content component as it contains the routing to different views (Only the main content of the page changes with the header, footer and left navigation remains the same). I'm not sure why? Any ideas on this would be of great help.

my boot.ts:

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {TrackerComponent} from './tracker.component';
import {enableProdMode} from 'angular2/core';
import {Http, HTTP_PROVIDERS, Headers} from 'angular2/http';
import 'rxjs/Rx';
//enableProdMode();
bootstrap(TrackerComponent, []);

main.component.ts:

import {Component, ElementRef, AfterViewInit, AfterViewChecked, OnInit, OnDestroy, DoCheck, Input, Output, SimpleChange, EventEmitter, ContentChild, ContentChildren, Renderer, IterableDiffers, Query, QueryList, TemplateRef} from 'angular2/core';

import {Http, HTTP_PROVIDERS, Headers}    from 'angular2/http';
import {CRUDService} from './service/CRUDService';
import {APIService} from './service/APIService';
/* Header, Footer, Left Navigation and my-app components*/
import {Header} from './Shared/layout/header/Header';
import {Footer} from './Shared/layout/footer/Footer';
import {LeftNavigation} from './Shared/layout/left-navigation/LeftNavigation';
import {AppComponent} from './app.component';
/* Header, Footer, Left Navigation and my-app components*/

@Component({
    selector: 'tracker-module',
    templateUrl: 'app/tracker.component.html',
    directives: [Header,Footer,LeftNavigation,AppComponent]
})
export class TrackerComponent {
    constructor() {}
    ngOnInit() {}
}

page.component.ts:

import {Component, ElementRef, AfterViewInit, AfterViewChecked, OnInit, OnDestroy, DoCheck, Input, Output, SimpleChange, EventEmitter, ContentChild, ContentChildren, Renderer, IterableDiffers, Query, QueryList, TemplateRef} from 'angular2/core';
import {ROUTER_PROVIDERS,LocationStrategy,HashLocationStrategy} from 'angular2/router';
import {TrackerUserAdmin} from "./Tracker/TrackerUserAdmin/TrackerUserAdmin";
import {CreateUserAdmin} from "./Tracker/CreateUserAdmin/CreateUser";
import {EditUserAdmin} from "./Tracker/EditUserAdmin/EditUser";
import {TrackerGroupAdmin} from "./Tracker/TrackerGroupAdmin/TrackerGroupAdmin";
import {CreateGroupAdmin} from "./Tracker/CreateGroupAdmin/CreateGroup";
import {EditGroupAdmin} from "./Tracker/EditGroupAdmin/EditGroup";
import {SavedSearch} from "./Tracker/SavedSearchAdmin/SavedSearch";
import {ResponseDateRules} from "./Tracker/ResponseDateRules/ResponseDateRules";
import {EditResponseDateRules} from "./Tracker/EditResponseDateRules/EditResponseDateRules";
import {CreateTicket} from "./Tracker/CreateTicket/CreateTicket";
import {TicketMaintenance} from "./Tracker/TicketMaintenance/TicketMaintenance";
import {TicketSearch} from "./Tracker/TicketSearch/TicketSearch";
/* Header and Footer*/
import {provideRouter, RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';
import {Http, HTTP_PROVIDERS, Headers}    from 'angular2/http';
import {CRUDService} from './service/CRUDService';
import {APIService} from './service/APIService';
/* Header and Footer*/

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
    { path: '/TrackerUserAdmin', name: 'TrackerUserAdmin', component: TrackerUserAdmin },
    { path: '/CreateUserAdmin', name: 'CreateUserAdmin', component: CreateUserAdmin },
    { path: '/EditUserAdmin', name: 'EditUserAdmin', component: EditUserAdmin },
    { path: '/TrackerGroupAdmin', name: 'TrackerGroupAdmin', component: TrackerGroupAdmin },
    { path: '/CreateGroupAdmin', name: 'CreateGroupAdmin', component: CreateGroupAdmin },
    { path: '/EditGroupAdmin', name: 'EditGroupAdmin', component: EditGroupAdmin },
    { path: '/SavedSearch', name: 'SavedSearch', component: SavedSearch },
    { path: '/ResponseDateRules', name: 'ResponseDateRules', component: ResponseDateRules },
    { path: '/EditResponseDateRules', name: 'EditResponseDateRules', component: EditResponseDateRules },
    { path: '/CreateTicket', name: 'CreateTicket', component: CreateTicket },
    { path: '/TicketMaintenance', name: 'TicketMaintenance', component: TicketMaintenance },
    { path: '/TicketSearch', name: 'TicketSearch', component: TicketSearch, useAsDefault: true }

])
export class AppComponent {
    constructor(private router: Router) {
        router.subscribe((val) => { /*whatever*/
            // alert("page verfication");
        });
    }
    //Do nothing
    ngOnInit() {
        alert("page verfication");
    }
}

However my alert inside my page.component.ts does work.

Answer 1

I your main.component.ts your are using <page-content></page-content> but there is no any selector <page-content></page-content> but in your app.component.ts file selector is 'my-app' and your are using <page-content></page-content>.Please change it to 'my-app' that why is not showing any thing.

Answer 2

Don't provide ROUTER_PROVIDERS more than once. Either in bootstrap(...) or in @Component() of your root component, but nowhere else.