cannot read property 'navigate' of undefined angular

Question

import { Component, OnInit, Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import { GuessService } from './guess.service';
import 'rxjs/add/operator/map';
import {Router} from '@angular/router';

declare var jQuery:any;
declare var $ :any;

@Component({
  selector: 'app-guess',
  templateUrl: './guess.component.html',
  styleUrls: ['./guess.component.css']
})
@Injectable()
export class GuessComponent implements OnInit {

  constructor(private router: Router) {}

  ngOnInit() {


  }
  CheckLogin(name,pass)
  {

    $.ajax({
      headers:{  

   "Accept":"application/json",//depends on your api
    "Content-type":"application/x-www-form-urlencoded"//depends on your api
      },   url:"http://199.188.207.196:5555/user/login/",
      method:"post",
      data:{"email":name,"password":pass},
      success:function(response){

        if(response.success == true){
        console.log("ok");
        this.router.navigate(['/main']);
      }
        else{
          console.log("backend");
        }
      }
    });
  }    

}

When user click on CheckLogin button then it must route to login component, but in my side it show error.

I found solution of my question in stackoverflow but it's not working, i don't know what is the problem.

Its just a class , not even a component. Please post whole code — Vikhyath Maiya, Jan 12 '18 at 14:11
Define `success` as an arrow function: `success: (response) => { ... }`. — ConnorsFan, Jan 12 '18 at 14:14
actually i am using jquery if i remove everything but this.router.navigate(['/main']); from CheckLogin function then it works fine — kappo, Jan 12 '18 at 14:14
but i dont want that navigate work with jquery ajax anybody help me? — kappo, Jan 12 '18 at 14:23
[You have lost the context of `this`](https://github.com/Microsoft/TypeScript/wiki/%27this%27-in-TypeScript), is there a reason you are using jQuery ajax instead of Angular HttpModule? — Michael Doye, Jan 12 '18 at 14:26
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Estus Flask, Jan 12 '18 at 14:48
So this one is showing an error too, isn't it? If you have problems with Http or HttpClient, I'd suggest to ask a question about that and figure it out. jQuery is unwelcome in Angular development, primarily because its use indicates that a dev isn't comfortable enough with Angular. — Estus Flask, Jan 12 '18 at 14:52

score 1 · Answer 1 · answered Jan 12 '18 at 14:52

1

you need to add => so that you can have the reference to the component.
e.g :

CheckLogin(name,pass) => {  
...  
}

this answer here was a pointer for me, it is still like a hack, you need to do things properly.
Angular2 injected Router is undefined

answered Jan 12 '18 at 14:52

Mashudu M

31
5

you mean like this `CheckLogin = (name,pass) => {...} ` – Isaac Weingarten Mar 06 '20 at 00:57
Yes,using arrow functions, should be something like: CheckLogin = (name,pass) => { ... } – Mashudu M Apr 24 '20 at 18:27

score 0 · Answer 2 · answered Jan 12 '18 at 14:09

Try this

import { Component, OnInit, Injectable} from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';

export class GuessComponent implements OnInit {

constructor(private router: Router, private route: ActivatedRoute) {}

CheckLogin(name,pass)
{
  this.router.navigate(['/login'], {relativeTo: this.route});
}

cannot read property 'navigate' of undefined angular

2 Answers2