2

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:
enter image description here

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.

5
  • could you show your routers files? Commented Oct 18, 2017 at 12:48
  • Can you show the html files with router-outlet? Commented Oct 18, 2017 at 12:56
  • @learner I have included necessary files in my updated question Commented Oct 18, 2017 at 13:11
  • I guess that you have to show HomeComponent and LoginComponent codes too. Commented Oct 18, 2017 at 13:16
  • @JaroslawK. I have updated the code for both the components in my question Commented Oct 18, 2017 at 13:19

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.