angular2 router navigation does not load component properly

Question

My code for that is as shown below:

googleClick(): void {
    this._auth.login('google').subscribe(
        (data: any) => {
            console.log('google server data ' + JSON.stringify(data));
            this.loginService.registerUser(data.email, data.name, '0').subscribe(res => {
                if (res.status === '200') {
                    this.storage.store('user_token', res.data.user_token);
                    this.storage.store('user_email', data.email);
                    this.storage.store('user_img', data.image);
                    this.storage.store('user_first_name', res.data.user_name);
                    this.storage.store('user_id', res.data._id);
                    this.storage.store('user_paltform_login', 0);
                    this.router.navigate(['/home']);
                }

            });
        });
}

As soon as I execute this code, it loads home (current) route and in the background login(past) route both. It looks weird as shown below:

app-routing.module.ts

const routes: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full' },
  {path : 'home', component : HomeComponent },
  {path : 'login', component : LoginComponent},
  {path : 'foodtrucks', component : FoodComponent},
  {path : ':user_name/order-history', component : OrderHistoryComponent},
  {path : 'cart' , component : CartComponent},
  {path : 'payment', component : PaymentComponent},
  {path : ':order_id/order-details', component : OrderDetailsComponent},
  {path : 'food-info', component : FoodInfoComponent},
  {path : 'thank-you', component : ThankYouComponent}
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

app.component.ts

@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet>',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
}

home.component.ts

@Component({
    selector: 'my-home',
    templateUrl : '../../template/home.html',
    styleUrls : ['../../css/home.css']
})


export class HomeComponent implements OnInit {
    food: any= [];
    itemList: any = [];
    user_name: any;
    user_email: any;
    user_image: any;
    myStyle: any = {
        width: '0px'
    };

    constructor(private router: Router, private _homeService: HomeService,
    private _storage: LocalStorageService, private winRef: WindowRef) {
        console.log('Window object', winRef.nativeWindow);
        // winRef.nativeWindow.alert('it is loaded');
    }

    ngOnInit(): void {
        this.user_name = this._storage.retrieve('user_first_name');
        this.user_email = this._storage.retrieve('user_email');
        this.user_image = this._storage.retrieve('user_img');
        this._homeService.getPopularItmes().subscribe(res => {
        if (res.status === '200') {
            let food = res.data;
            for (let value of food) {
                for (let item of value.item_list){
                    this.itemList.push(item);
                }
            }
        }
    });
}


    openNav(): void {
        console.log('open nav clicked');
        this.myStyle.width = '230px';
    };

    closeNav(): void {
        this.myStyle.width = '0px';
    };

    tabClicked(): void {
        this.router.navigate(['/foodtrucks']);
    };

    loadCart(): void {
        this.router.navigate(['/cart']);
    };
}

login.component.ts

@Component({
    selector : 'my-login',
    templateUrl : '../../template/login.html',
    styleUrls : ['../../css/login.css']
})

export class LoginComponent {

    constructor(private router: Router, public _auth: AuthService,
        private storage: LocalStorageService, private loginService: LoginService) {
     }

    FBLogin(): void {
        this._auth.login('facebook').subscribe(
            (data: any) => {
              console.log(data);
            }
          );
        // this.router.navigate(['/home']);
    }

    googleClick(): void {
        this._auth.login('google').subscribe(
            (data: any) => {
              console.log('google server data ' + JSON.stringify(data));
              this.loginService.registerUser(data.email, data.name, '0').subscribe(res => {
                if (res.status === '200') {
                   this.storage.store('user_token', res.data.user_token);
                   this.storage.store('user_email', data.email);
                   this.storage.store('user_img', data.image);
                   this.storage.store('user_first_name', res.data.user_name);
                   this.storage.store('user_id', res.data._id);
                   this.storage.store('user_paltform_login', 0);
                   this.router.navigate(['/home']);
            }

    });
});

    }

}

One thing I have noticed is if I remove everything inside googleClick() and keep only this.router.navigate(['/home']); then this works fine.

Answer 1

On your googleClick() method do the following:

• Inject NgZone into your component
• Wrap the line this.router.navigate(['/home']); into NgZone run method

It will be like:

this.ngZone.run(() => this.router.navigate(['/home']))

It's a workaroung based on this issue on github.