Angular 2 - many history entries on page load

Question

When I open my Angular 2 app in a fresh browser window I get 10 entries in the browser page history. This happens on any page listed in the router and with no page specified (i.e. http://localhost:8080 or http://localhost:8080/survey etc)

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'},
];

I'm using router 3.1.2

"@angular/router": "3.1.2",

I have found a similar question from March last year but the answer claims it was solved in Angular's code already.

Update As requested, here is the AuthGuard code

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

I think I'd need a sample codebase to look through, I haven't had this occur in any of my Angular apps, so I'm not sure how to reproduce this issue... — MichaelSolati, Jun 14 '17 at 20:35
If we could look at your components listed in there it'd be easier to give a solution or at least a clue, the only think I can suggest right now is listening for route events, check this answer https://stackoverflow.com/questions/33520043/how-to-detect-a-route-change-in-angular-2/38080657#38080657 — Daniel Arechiga, Jun 15 '17 at 16:03
The rest of the codebase only as router events that are trigger by events (forms etc) and I've traced them and made sure they are not in use on page load. I've not upgraded to 4 yet, we have other A2 apps it it doesn't happen there so I'm fairly sure it is not systemic. — Craig, Jun 16 '17 at 09:06
Can you change the order of the routes , like the empty path to be on top . i think this might help — Rahul Singh, Jun 18 '17 at 15:49
This looks like something is happening in the AuthGuard, could you please post that code too? — Graham, Jun 18 '17 at 16:20

score 3 · Answer 1 · 2017-06-19T17:40:54.293

3

I had a similar situation and i solved it by lazy loading routes That is you can separate the routes to different module routing ad in the main route load like thi

IN the main route

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

SO inthe user module youll have

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

 } )
export class UserModule {

 }

THen the user routing module has

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

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

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

THats how i solved my issue, I hope this helps.

NB: remember the main route to import.forRoot

In this case ensure that in the root module(probly app module you import user module)

  @NgModule({
    declarations: [
    ],

  imports: [

    UserModule,  //in your case maybe use survey module

    ],

   })

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

edited Jun 19 '17 at 17:40

answered Jun 18 '17 at 14:57

I've looked through the docs on LazyLoading (https://github.com/AngularClass/angular-starter/wiki/Routing-and-Lazy-loading-@NgModules) but can't get the path in the loadChildren property to be accepted, even though it works fine in an import statement in the same file – Craig Jun 18 '17 at 21:20
Its not documented in the official docs but found ift here: https://scotch.io/courses/routing-angular-2-applications/lazy-loading – Jun 19 '17 at 03:37
It hasn't improved anything I'm afraid. Despite the path working fine in the imports (at witnessed by WebStorm autocompleting the name) at run time I get "Cannot find module './survey/survey.module'." ******** import { SurveyModule } from './survey/survey.module'; const routes: Routes = [ {path: '', component: HomeComponent}, {path: 'survey', loadChildren: './survey/survey.module#SurveyModule' }, – Craig Jun 19 '17 at 09:52
I have updated my answer, For the error cannot find surveyModule have you imported survey module in your root module(app module) – Jun 19 '17 at 17:35
ensure that in the root module you include Survey module as an imports – Jun 19 '17 at 17:37

Angular 2 - many history entries on page load

1 Answers1