角度2 RC 4 - hashlocationstrategyはもはや

Question

働く我々は（BrowserSyncを使用して）、ブラウザでページを更新することができるようにHashLocationStrategyを使用している候補4.

を解放するために、当社の角度2プロジェクトをアップグレードしました。 しかしRC4ではこれはもう機能しません。 ルータアウトレットにコンポーネントがロードされていません。 しかし、メニュー項目のrouterlinkを使用すると動作します。

RC4用のHashLocationStrategyが壊れていますか、それとも正しく使用されていませんか？ インターネットに関する情報はまだ見つかりませんでした。 （ちょうど今何が起こっているのかを知るために、Angular2のソースコードを見つけようとしています）

更新：ここにコードがあります。

また、既定のルートを動作させる方法が見つからないようです。 以下に示すように空のパスを試してみましたが、リダイレクトを試しました...デフォルトルートをトリガーしてルートコンセントにコンポーネントをロードするものは何もありません。

// 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); 

更新：私はリンクをクリックし、[routerLink]を用いてビューに移動すると

、次いでルータ出口が正しい部品で満たされます。例えば、 'auto'にナビゲートするとき。

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

しかし、私は、例えば「自動」のページを更新すると、ルータ出口が空になります。

Answer 1

角度2 rc4では、LocationStrategyがルータから共通に移動されているようです。そこからインポートする必要があります。

「提供」行の中括弧にも注意してください。

RC4：main.ts

// Imports for loading & configuring the in-memory web api 
import { XHRBackend } from '@angular/http'; 

// The usual bootstrapping imports 
import { bootstrap }  from '@angular/platform-browser-dynamic'; 
import { HTTP_PROVIDERS } from '@angular/http'; 

import { AppComponent }   from './app.component'; 
import { APP_ROUTER_PROVIDERS } from './app.routes'; 
import { Location, LocationStrategy, HashLocationStrategy} from '@angular/common'; 

bootstrap(AppComponent, [ 
    APP_ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
    {provide: LocationStrategy, useClass: HashLocationStrategy} 
]); 

RC5：これはmain.ts.するための主要な変更が再び変更されrc.5で

をapp.module.ts Hashlocationstrategyは、RouterModuleのインポート時にオプションとしてapp.module.tsに実装されるようになりました。

@NgModule({ 
imports: [routing, RouterModule.forRoot(routing,{ useHash: true })], 

2.0.0は：角度2.0.0（=リリース版）で

をapp.module.ts Hashlocationstrategyはapp.module.tsにとどまったが、言い回しは少し変えました。今はプロバイダと一緒に座っている。

... 
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; 
... 

@NgModule({ 
    bootstrap: [AppComponent], 
    imports: [ 
    //all your modules 
    ], 
    declarations: [ 
    //all your components 
    ], 
    providers: [ 
    //all your services 
    {provide: LocationStrategy, useClass: HashLocationStrategy}, 
    ] 
})