Угловой 2 маршрутизатор не загружается при обновлении до тех пор, пока я не нажму кнопку

Question

Я создаю панель с вкладками и использую угловой 2 маршрутизатор v.3.0.0-beta.1, и у меня возникают проблемы с загрузкой приложения изначально. Всякий раз, когда я загружаю страницу, я должен щелкнуть вкладку, чтобы на самом деле отображались/панели мониторинга. Сначала я подумал, что это связано с моей ссылкой на маршрут (в настоящее время прокомментированной) на вкладке 1, но это все равно происходит без нее. Я пытаюсь использовать автозагрузку на вкладке 1, а затем каждая вкладка содержит свой собственный маршрут. Другие вкладки, похоже, не работают ни с точки зрения использования разных маршрутов, ни для функций печати. Любая помощь будет оценена по достоинству.
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

Вы не покажите свой файл index.html, но я подозреваю, что вы можете включить в свою очередь скрипт system-polyfills.js. Удаление этого файла решило эту проблему для меня.

Answer 2

Добавьте к этому вашим маршрутам:

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