角度2 - ページの読み込み時に多数の履歴エントリ

Question

新しいブラウザウィンドウでAngular 2アプリケーションを開くと、ブラウザページの履歴に10個のエントリが表示されます。これは、ルータに記載されている任意のページで、指定していないページ（すなわちhttp://localhost:8080またはhttp://localhost:8080/surveyなど）

const routes: Routes = [ 
    {path: 'survey', component: SurveyComponent, canActivate: [AuthGuard]}, 
    {path: 'survey/:id', component: SurveyComponent, canActivate: [AuthGuard]}, 
    {path: '', component: HomeComponent}, 
    {path: 'about', component: AboutComponent}, 
    {path: 'terms', component: TermsAndConditionsComponent}, 
    {path: 'map', component: MapComponent}, 
    {path: 'what-next', component: WhatNextComponent}, 
    {path: 'contact', component: ContactComponent}, 
    {path: '**', redirectTo: '', pathMatch: 'full'}, 
]; 

私が使用しているルータ私が持っている3.1.2

"@angular/router": "3.1.2", 

で発生します昨年3月からsimilar questionが見つかりましたが、回答はすでにAngularのコードで解決されたと主張しています。

更新 要求されたとして、ここで私は似たような状況があったと私はあなたが広告をルーティングする別のモジュールへのルートを分離することができている遅延ロードルート ことによってそれを解決し

import {Injectable} from '@angular/core'; 
import {AuthenticationService} from '../_services/index'; 
import {LoginModalService} from "../login_modal/login_modal.service"; 
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router'; 
import {Observable} from 'rxjs/Observable'; 

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private authentication: AuthenticationService, private loginModalService: LoginModalService) { 
    } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     if (this.authentication.isAuthenticated()) { 
      return Observable.of(true); 
     } else { 
      this.loginModalService.toggleVisable(state.url); 
      return Observable.of(false); 
     } 
    } 
} 

Answer 1

AuthGuardコードにあります主な経路ではTHI

のようなメインルート負荷

 { 
     path: 'dashboard', 
     component: DashboardComponent, 
     }, 
     { 
     path: 'user', 
     loadChildren: 'app/user/user.module#UserModule', //in user module 
     }, 

SO intheユーザモジュールは、youllの

@NgModule ({ 
    imports: [ 
    userRoutingModule //contains my user module routes 
    ] , 

}) 
export class UserModule { 

} 

を持っているし、ユーザーのルーティングモジュールは、私は私の問題を解決する方法

const userRoutes: Routes = [ 
     { path: '', component: UserComponent}, 
    ]; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(userRoutes) 
    ], 

    exports: [RouterModule], 
    providers: [] 
    }) 
export class userRoutingModule { } 

thatsのを持って、私はこのことができます願っています。

NB：私はサンプルを必要とすると思う（problyアプリモジュールは、ユーザーモジュールをインポートする）ルートモジュール内のことを確認してください。この場合、

@NgModule({ 
    declarations: [ 
    ], 

    imports: [ 

    UserModule, //in your case maybe use survey module 

    ], 

    }) 

    export class AppModule {} //this is in my root module