Angular 2路由器在刷新之前没有加载，直到我点击按钮

Question

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.
app.component.ts:

@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");}


}

app.routes.ts

const routes: RouterConfig = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    component: DashboardsComponent
  }
];

export const appRouterProviders = [
  provideRouter(routes)
];

app.component.html

<md-sidenav-layout>
  <md-sidenav mode="push"#sidenav>
   <!-- <md-nav-list>
      <a md-list-item *ngFor="let view of views">
       <md-icon md-list-icon>{{view.icon}}</md-icon>
       <span md-line>{{view.name}}</span>
       <span md-line class="secondary">{{view.description}}</span>
      </a>
    </md-nav-list>-->
  </md-sidenav>
  <md-toolbar color="primary">

<!--button md-icon-button (click)="sidenav.open()"">
<md-icon>menu</md-icon>
</button-->
Braavos
</md-toolbar>
<md-tab-group>
  <md-tab>
    <template md-tab-label>One</template>
    <nav>
    <!--a routerLink="/dashboards" routerLinkActive="active">One</a-->
  </nav>
  </md-tab>
  <md-tab (click)="print()">
    <template md-tab-label>Two</template>
  </md-tab>
  <md-tab (click)="print()">
    <template md-tab-label>Three</template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Four</template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Five</template>
  </md-tab>
</md-tab-group>
</md-sidenav-layout>

<!--THIS IS WHERE ALL ROUTING APPEARS-->
<router-outlet></router-outlet>

dashboards.component.ts

@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 => this.dashboards = dashboard);
  }
  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       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']); }

}

Answer 1

You don't show your index.html file, but I suspect you may be including the system-polyfills.js script in your head. Removing this file solved this issue for me.

Answer 2

Add this to your routes:

{
    path: '**',
    redirectTo: '/dashboard'
  },