title: Angular 2 router not loading on refresh until I click button
body: <p>I am making a tabbed dashboard and am using angular 2 router v.3.0.0-beta.1 and am having issues loading the app initially. Whenever I load the page I have to click a tab in order for /dashboards in  to actually appear. At first I thought it had to do with my route link (currently commented out) in tab 1, but it still happens without it. I am trying to have tab 1 autodisplay and then have each tab contain its own route. The other tabs dont seem to be working either in terms of containing different routes or print functions. Any help would be appreciated.<br>
   app.component.ts:  </p>
  
  <pre><code>@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    directives: [
      MD_SIDENAV_DIRECTIVES,
      MD_LIST_DIRECTIVES,
      MD_CARD_DIRECTIVES,
      MdToolbar,
      MdButton,
      MdInput,
      MdCheckbox,
      MdRadioGroup,
      MdRadioButton,
      MdIcon,
      MD_TABS_DIRECTIVES,
      DashboardsComponent,
      ROUTER_DIRECTIVES
    ],
    providers: [MdIconRegistry, MdRadioDispatcher, DashboardService],
    precompile: [DashboardsComponent]
  
  
  })
  export class AppComponent implements OnInit {
  
    dashboards: Dashboard[];
    selectedDashboard: Dashboard;
    constructor(private dashboardService: DashboardService,
                private router: Router) { console.log("outer constr");}
    ngOnInit() {
      console.log("outer init");
  
    }
  
    print() {console.log("TRYING");}
  
  
  }
  </code></pre>
  
  <p>app.routes.ts</p>
  
  <pre><code>const routes: RouterConfig = [
    {
      path: '',
      redirectTo: '/dashboard',
      pathMatch: 'full'
    },
    {
      path: 'dashboard',
      component: DashboardsComponent
    }
  ];
  
  export const appRouterProviders = [
    provideRouter(routes)
  ];
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;md-sidenav-layout&gt;
    &lt;md-sidenav mode="push"#sidenav&gt;
     &lt;!-- &lt;md-nav-list&gt;
        &lt;a md-list-item *ngFor="let view of views"&gt;
         &lt;md-icon md-list-icon&gt;{{view.icon}}&lt;/md-icon&gt;
         &lt;span md-line&gt;{{view.name}}&lt;/span&gt;
         &lt;span md-line class="secondary"&gt;{{view.description}}&lt;/span&gt;
        &lt;/a&gt;
      &lt;/md-nav-list&gt;--&gt;
    &lt;/md-sidenav&gt;
    &lt;md-toolbar color="primary"&gt;
  
  &lt;!--button md-icon-button (click)="sidenav.open()""&gt;
  &lt;md-icon&gt;menu&lt;/md-icon&gt;
  &lt;/button--&gt;
  Braavos
  &lt;/md-toolbar&gt;
  &lt;md-tab-group&gt;
    &lt;md-tab&gt;
      &lt;template md-tab-label&gt;One&lt;/template&gt;
      &lt;nav&gt;
      &lt;!--a routerLink="/dashboards" routerLinkActive="active"&gt;One&lt;/a--&gt;
    &lt;/nav&gt;
    &lt;/md-tab&gt;
    &lt;md-tab (click)="print()"&gt;
      &lt;template md-tab-label&gt;Two&lt;/template&gt;
    &lt;/md-tab&gt;
    &lt;md-tab (click)="print()"&gt;
      &lt;template md-tab-label&gt;Three&lt;/template&gt;
    &lt;/md-tab&gt;
    &lt;md-tab&gt;
      &lt;template md-tab-label&gt;Four&lt;/template&gt;
    &lt;/md-tab&gt;
    &lt;md-tab&gt;
      &lt;template md-tab-label&gt;Five&lt;/template&gt;
    &lt;/md-tab&gt;
  &lt;/md-tab-group&gt;
  &lt;/md-sidenav-layout&gt;
  
  &lt;!--THIS IS WHERE ALL ROUTING APPEARS--&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>dashboards.component.ts</p>
  
  <pre><code>@Component({
    selector: 'dashboards',
    moduleId: module.id,
    templateUrl: 'dashboards.component.html',
    styleUrls: ['./../app.component.css'],
    directives: [
      MD_LIST_DIRECTIVES,
      MD_CARD_DIRECTIVES,
      MdButton,
      MdInput,
      MdCheckbox,
      MdRadioGroup,
      MdRadioButton,
      MdIcon,
    ],
    providers: [MdIconRegistry, MdRadioDispatcher],
  
  })
  export class DashboardsComponent implements OnInit, OnDestroy {
  
    dashboards: Dashboard[];
    selectedDashboard: Dashboard;
    private sub: any;
    constructor(
      private route: ActivatedRoute,
      private router: Router,
      private service: DashboardService) {
        this.service.getDashboards(1).then(dashboard =&gt; this.dashboards = dashboard);
    }
    ngOnInit() {
      this.sub = this.route.params.subscribe(params =&gt; {
         let id = +params['id']; // (+) converts string 'id' to a number
       });
      console.log("init");
    }
    ngOnDestroy() {
      this.sub.unsubscribe();
    }
      onSelect(dashboard: Dashboard) { this.selectedDashboard = dashboard; console.log(this.selectedDashboard.name); }
  
    //gotoDashboards() { this.router.navigate(['/dashboards']); }
  
  }
  </code></pre>