angular2 cannot navigate with router

Question

I am trying to navigate to another route after users click a login button. But I can't understand what went wrong. Below is my login component.

import { Component, OnInit } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router, ActivatedRoute } from '@angular/router';

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


export class LoginComponent implements OnInit {

  constructor(public af: AngularFire, private router: Router) {
    this.af.auth.subscribe(auth => console.log(auth));
  }

  login() {
    this.af.auth.login({
      provider: AuthProviders.Google,
      method: AuthMethods.Popup,
    }).then(function(res) {
      console.log('login success');
      console.log(res.uid);
      this.router.navigateByUrl('/main') // .then(r => console.log('then: ' + r))
       .then(function(resw) {
         console.log('has redirect');
       })
       .catch(err => console.error(err)) ;
       console.log('afterward');
    }).catch(err => console.error(err));
  }

  overrideLogin() {
    this.af.auth.login({
      provider: AuthProviders.Anonymous,
      method: AuthMethods.Anonymous,
    });
  }

  ngOnInit() {
  }

}

<p>
  login works!
</p>

<button (click)="login()">Login With Google</button>
<button (click)="overrideLogin()">Login Anonymously</button>

Here is my routes:

import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router' ;

const APP_ROUTES: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', pathMatch: 'full', redirectTo: '/login'},
    { path: 'main', component: MainComponent }
];

export const appRoutingProviders: any[] = [

];

export const APP_ROUTES_PROVIDER: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);

Here is the @NgModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

// import routing
import { appRoutingProviders, APP_ROUTES_PROVIDER } from './app.routes' ;



@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    // AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig), // angularfire setup 
    FormsModule,
    HttpModule,
    APP_ROUTES_PROVIDER
  ],
  providers: [appRoutingProviders],
  bootstrap: [AppComponent]
})
export class AppModule { }

I got the following error. Can someone please help let me know how to fix this?

TypeError: this is null Stack trace: LoginComponent</LoginComponent.prototype.login/<@http://localhost:4200/main.bundle.js:70294:13 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:69125:19 NgZoneImpl/this.inner<.onInvoke@http://localhost:4200/main.bundle.js:56178:28 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:69124:19 Zone$1</Zone</Zone.prototype.run@http://localhost:4200/main.bundle.js:69018:24 scheduleResolveOrReject/<@http://localhost:4200/main.bundle.js:69384:52 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:69158:23 NgZoneImpl/this.inner<.onInvokeTask@http://localhost:4200/main.bundle.js:56169:28 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:69157:23 Zone$1</Zone</Zone.prototype.runTask@http://localhost:4200/main.bundle.js:69058:28 drainMicroTaskQueue@http://localhost:4200/main.bundle.js:69290:25 ZoneTask/this.invoke@http://localhost:4200/main.bundle.js:69230:25

can you show routes defined in your app? also show `@NgModule`. — micronyks, Sep 18 '16 at 11:53
http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback. In type script if you use a fat arrow `=>` it'll cache the `this` for you ie `this.af.auth.login({ provider: AuthProviders.Google, method: AuthMethods.Popup, }).then((res) => {})` — shusson, Sep 18 '16 at 11:56
@shusson Thank God. You are my hero. That fixed the problem. If you make that an answer, I will accept it. — Huan Hoang, Sep 18 '16 at 12:11

score 1 · Accepted Answer · answered Sep 18 '16 at 12:08

Arrow Function(()=>) will resolve issue as every configuration is correct.

login() {
    this.af.auth.login({
      provider: AuthProviders.Google,
      method: AuthMethods.Popup,
    }).then((res)=> {                    //<----changed this line
       console.log('login success');
       console.log(res.uid);
       this.router.navigateByUrl('/main') // .then(r => console.log('then: ' + r))
      .then((resw)=> {                  //<----changed this line
         console.log('has redirect');
       })
       .catch(err => console.error(err)) ;
       console.log('afterward');
    }).catch(err => console.error(err));
  }

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

this is special in javascript, it depends how the function was called see How to access the correct `this` context inside a callback?.

In type script if you use a fat arrow => it'll cache the this for you eg this.af.auth.login({}).then((res) => {})

edited May 23 '17 at 12:17

Community

1
1

answered Sep 18 '16 at 12:19

shusson

5,542
34
38

angular2 cannot navigate with router

2 Answers2