Diese Frage hat hier bereits eine Antwort:

Wir haben unser Angular 2-Projekt auf Release Candidate 4 aktualisiert.

Wir verwenden HashLocationStrategy, um eine Seite im Browser aktualisieren zu können (mit BrowserSync). Aber mit RC4 funktioniert das nicht mehr. In das Routeroutlet ist keine Komponente geladen. Die Verwendung des Routerlinks eines Menüelements funktioniert jedoch.

Ist die HashLocationStrategy für RC4 defekt oder verwenden wir sie nicht richtig? Wir haben noch keine Informationen im Internet gefunden. (Ich versuche gerade, unseren Weg durch den Angular2-Quellcode zu finden, um herauszufinden, was los ist.)

Update: Hier ist der Code.

Auch scheinen wir keinen Weg zu finden, um eine Standardroute zum Laufen zu bringen. Versuchte den leeren Pfad wie unten gezeigt, versuchte die Umleitung ... nichts scheint eine Standardroute auszulösen, die eine Komponente in den route-outlet lädt.

// boot:

import {bootstrap} from '@angular/platform-browser-dynamic';

import {AppComponent} from './app.component';

bootstrap(AppComponent)
    .catch(err => console.log(err));


// AppComponent:

import {Component, provide, ExceptionHandler} from '@angular/core';
import {HTTP_PROVIDERS, XHRBackend} from '@angular/http';
import {CORE_DIRECTIVES, LocationStrategy, HashLocationStrategy} from '@angular/common';
import {TranslatePipe, TranslateService, TRANSLATE_PROVIDERS} from 'ng2-translate/ng2-translate';

import {SideMenuComponent} from './navigatie/index';
import {AppSettingsService, Auth, MockBackendToggle} from './shared/index';
import {EssStorage} from './shared/ess-storage';
import {EssHttp} from './shared/ess-http';
import {DienstverbandService} from './dienstverband/shared/dienstverband.service';
import {HeaderMenuComponent} from './navigatie/headermenu/headermenu.component';
import {WerknemerService} from './werknemer/werknemer.service';
import {PersoonService} from './werknemer/persoon/shared/persoon.service';
import {RouterOutlet} from '@angular/router';
import {APP_ROUTER_PROVIDER} from './navigatie/routes';
import {AuthGuard} from './shared/auth/auth-guard';
import {EssExceptionHandler} from './shared/ess-exception-handler';


@Component({
    selector: 'ess-app',
    pipes: [TranslatePipe],
    directives: [CORE_DIRECTIVES, SideMenuComponent, HeaderMenuComponent, RouterOutlet],
    providers: [TRANSLATE_PROVIDERS, TranslateService, HTTP_PROVIDERS, EssHttp, WerknemerService, APP_ROUTER_PROVIDER, AuthGuard,
                AppSettingsService, Auth, DienstverbandService, PersoonService, provide(XHRBackend, {useClass: MockBackendToggle}),
                provide(LocationStrategy, {useClass: HashLocationStrategy}), provide(ExceptionHandler, {useClass: EssExceptionHandler})],
    template: `
    <div id='main'>
        <div class='header  hidden-xs' *ngIf="_auth !== undefined && _auth.isLoggedIn()">
            <header>
                <ess-headermenu></ess-headermenu>
            </header>
       </div>

        <div class='ess-sidemenu-container visible-lg' *ngIf="_auth !== undefined && _auth.isLoggedIn()">
            <ess-sidemenu></ess-sidemenu>
        </div>

        <div class='main-content-container col-lg-12'>
            <section> 
                <section id='content'>
                    <div>
                        <router-outlet></router-outlet>
                    </div>
                </section>
            </section>
        </div>
    </div>`
})
export class AppComponent { //..}

// routes:

import {provideRouter, RouterConfig} from '@angular/router';
import {DashboardComponent} from '../dashboard/index';
import {PersonaliaComponent} from '../werknemer/index';
import {LoginComponent} from '../login/index';
import {AuthGuard} from '../shared/auth/auth-guard';

export const appRoutes: RouterConfig = [
    {path: '',                      component: LoginComponent},
    {path: 'login/:url',            component: LoginComponent},
    {path: 'dashboard',             component: DashboardComponent},
    {path: 'personalia',            component: PersonaliaComponent,             canActivate: [AuthGuard]}
];

export const APP_ROUTER_PROVIDER = provideRouter(appRoutes);

Aktualisieren

Wenn ich zu einer Ansicht navigiere, indem ich auf einen Link klicke und [routerLink] verwende, wird der Router-Ausgang mit der richtigen Komponente gefüllt. Zum Beispiel bei der Navigation zu 'auto'.

<li class="submenuitem" [routerLink]="['auto']"><a href="#"><span>{{'AUTO' | translate}}</span></a></li>

Aber wenn ich zum Beispiel die 'Auto'-Seite aktualisiere, wird der Router-Ausgang leer.