Search code examples
angulartypescripthttp-redirectangular-router

Router undefined in Angular2


I would like to define a redirect from my login to my dashboard after a successful user verification. But when I implement "this.router.navigate(['/dashboard'])" in my login component it gave me the error: "exception: undefined is not an object (evaluating 'this.router')"

Here is how I implemented the function:

export class ContactComponent implements OnInit {
  contactForm: FormGroup;
  errorMsg:string = '';

  constructor(private formBuilder: FormBuilder, private _router: Router) {
            this._router = _router;
          }

  ngOnInit() {
    this.contactForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
    });
    DBEventProxy.instance(); // Init Eventbus
  }

  submitForm(): void {
    DBEventProxy.instance().dbevent.login(this.contactForm['username'], this.contactForm['password'], this.loggedIn, this.failed);
  }

  loggedIn(): void {
    this._router.navigate(['/dashboard']);
    console.log("success");
    DBEventProxy.instance().dbevent.register("disconnected", function (message) {
      console.log("Client disconnected: " + JSON.stringify(message));
    });
    DBEventProxy.instance().dbevent.register("status", function (message) {
      console.log("Client reconnected: " + JSON.stringify(message));
    });
    DBEventProxy.instance().dbevent.register("routeravailable", function (message) {
      console.log("Router Available: " + JSON.stringify(message));
    });
    DBEventProxy.instance().dbevent.register("routerunavailable", function (message) {
      console.log("Router Unavailable: " + JSON.stringify(message));
    });
    DBEventProxy.instance().dbevent.listen();
    DBEventProxy.instance().dbevent.send({msgtype: "dashboardready"});

  }
failed(message: string): void {
console.log("failed: " + message);


}
}

Hope, that someone can help me!

Update: Error occurs when I log in with my login information. I got my ConnectReply from the Server and the connection exists. But the redirect does not work. There are multiple errors. I will try to display those in the following:

  1. EXCEPTION: undefined is not an object (evaluating 'this._router')
  2. ORIGINAL STACKTRACE: (many documents and handleErrors in here)
  3. TypeError: undefined is not an object (evaluating 'this._router')

Routes config:

export const rootRouterConfig: Routes = [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'contact', component: ContactComponent },
      { path: '', redirectTo: '/contact', pathMatch: 'full'}
    ];

Solution

  • Original answer

    Remove this line from your constructor:

    this._router = _router;
    

    In TypeScript, when you declare the argument of the constructor as public or private, the class property will be set for you.

    Update

    Sounds like this._router is called in a context in which this is not what you expect. Within the submitForm method, try changing

    this.loggedIn
    

    to

    ()=>{this.loggedIn()}