Angular 2 RC 4 - a estratégia de hashlocations não está mais funcionando [duplicado]
Esta pergunta já tem uma resposta aqui:
Location e HashLocationStrategy pararam de funcionar na versão beta.16 1 respostaAtualizamos nosso projeto Angular 2 para o Release Candidate 4.
Estamos usando o HashLocationStrategy para poder atualizar uma página no navegador (usando o BrowserSync). Mas com o RC4 isso não funciona mais. Nenhum componente é carregado na saída do roteador. No entanto, o uso do link do roteador de um item de menu funciona.
O HashLocationStrategy for RC4 está quebrado ou não o estamos usando corretamente? Ainda não encontramos nenhuma informação na Internet. (agora, apenas tentando encontrar o caminho através do código-fonte Angular2 para descobrir o que está acontecendo)
Atualização: aqui está o código.
Além disso, parece que não conseguimos encontrar uma maneira de fazer com que uma rota padrão funcione. Tentei o caminho vazio, como visto abaixo, tentei o redirecionamento ... nada parece acionar uma rota padrão que carregará um componente na saída da rota.
// 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);
Atualizar:
Quando navego para uma visualização clicando em um link e usando [routerLink], a saída do roteador é preenchida com o componente correto. Por exemplo, ao navegar para 'automático'.
<li class="submenuitem" [routerLink]="['auto']"><a href="#"><span>{{'AUTO' | translate}}</span></a></li>
Mas quando, por exemplo, atualizo a página 'auto', a tomada do roteador fica vazia.