子コンポーネントをリフレッシュするときのエラーAngular2

Question

ここは私のモジュールコードです。だから、私のアプリはこのように行く：ログイン（ダッシュボードに行くためにボタンを押す） - >ダッシュボード（子供のコンポーネントに行くためのプレスリンク） - >オンライン/オフラインコンポーネント。

これらはすべて同じページにあります。私はそれらをナビゲートするために使用

方法：

this.router.navigate(['/dashboard'] 

routerLink= '/dashboard/online 

routerLink= '/dashboard/offline 

app.module.ts

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     JsonpModule, 
     RouterModule.forRoot([ 
     { 
      path: 'login', 
      component: LoginComponent 

     },{ 
      path: 'dashboard', 
      component: DashboardComponent, 
      children: [ 
       { 
        path: 'online', 
        component: OnlineComponent 
       },{ 
        path: 'offline', 
        component: OfflineComponent 
       },{ 
        path: '', 
        redirectTo: 'online', 
        pathMatch: 'full' 

       } 
      ] 
     },{ 
      path: '', 
      redirectTo: '/login', 
      pathMatch: 'full' 
     } 
     ]) 
    ], 

これは、ルーティングのために正常に動作します。しかし、URLバーにlocalhost：3000/dashboard/onlineと表示されたときにページをリフレッシュしてください。ページはリフレッシュ後に読み込まれません。私はそれが私が子供のコンポーネントを設定するか、それが子コンポーネントを持っているので、私はダッシュボードのコンポーネントにベースHREFを追加する必要があります方法に関係していると思います

error at GET http://localhost:3000/dashboard/node_modules/core-js/client/shim.min.js 
error at GET http://localhost:3000/dashboard/node_modules/zone.js/dist/zone.js 
error at GET 
http://localhost:3000/dashboard/node_modules/reflect-metadata/Reflect.js 
error at GET http://localhost:3000/dashboard/node_modules/systemjs/dist/system.src.js 
Uncaught ReferenceError, system is not defined. 

：コンソールは、このようなエラーが表示されます。

私にこれを手伝ってください。

ありがとうございます。

Answer 1

これは、前後の矢印やリフレッシュに関連する角度ルータの問題と関係がある可能性があります。私は非常に似た問題を抱えていた。

実際にこれを行うのかどうかはわかりませんが、app.moduleでこれを試してみてください。ロケーションの戦略を古い古いハッシュタグのものに戻します（URLはhttp://foo/barではなくhttp://foo/#/barのようになります）。 ）。私がこれをやった後は、すべての爽快で前方/後方のナビゲーションの問題はなくなりました（たとえば、自分のサイトからwww.amazon.comに行き、その後、戻る矢印を押すと、サーバーは "見つからない"など）：

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

@NgModule({ 
    declarations: [ ... ], 
    imports: [ ... ], 
    providers: [ 
    {provide: LocationStrategy, useClass: HashLocationStrategy} 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }