Ndtyjky

I'm getting this response when making an HTTP request in service:

TypeError: Cannot read property 'length' of null

    at eval (http.js:123)

    at Array.forEach (<anonymous>)

    at HttpHeaders.lazyInit (http.js:117)

    at HttpHeaders.init (http.js:265)

    at HttpHeaders.forEach (http.js:368)

    at Observable.eval [as _subscribe] (http.js:2172)

    at Observable.subscribe (Observable.js:162)

    at eval (subscribeToObservable.js:16)

    at subscribeToResult (subscribeToResult.js:6)

    at MergeMapSubscriber._innerSub (mergeMap.js:127)

ALERT!!!!! 

I subscribe the HTTP request when loading my component:

export class TasksComponent implements OnInit {

  currentUser:any;

  username:string=null;

  constructor(private usersService:UsersService) {}

  ngOnInit() {

    this.username=localStorage.getItem('currentUsername');

    console.log(this.username);

    this.usersService.getUserByUsername(this.username)

      .subscribe(data=>{

        console.log(data);

        this.currentUser=data;

      },err=>{

        console.log(err);

        console.log("ALERT!!!!! ");

      })

  }

}

UsersService:

//for getting a user by its username

getUserByUsername(username:string){

  if(this.jwtToken==null) this.authenticationService.loadToken();

    return this.http.get(this.host+"/userByUsername?username="+username

          , {headers:new HttpHeaders({'Authorization':this.jwtToken})}

    );

}

How I stored the username in the localStorage so I can use it to find the user with all his properties :

@Injectable()

export class AuthenticationService {

  private host:string="http://localhost:8080";

  constructor(private http:HttpClient){}

  login(user){

    localStorage.setItem('currentUsername', user.username);

    return this.http.post(this.host+"/login",user, {observe:'response'});

  }

}

My localStorage after a Log In

Knowing that the method is working in the back-end like in this picture
what do you think the problem is? is it a service injection problem or is it about dependencies, or another thing?

EDIT
The loadToken function:

loadToken(){

    this.jwtToken=localStorage.getItem('token');

    console.log(this.jwtToken);

    let jwtHelper=new JwtHelper();

    this.roles=jwtHelper.decodeToken(this.jwtToken).roles;

    return this.jwtToken;

}

since you don't see the request in the network-panel of your browser, it seems that you don't send the request. This is probably because you don't set the token in this line:

if(this.jwtToken==null) this.authenticationService.loadToken();

the error:

TypeError: Cannot read property 'length' of null

    at eval (http.js:123)

    at Array.forEach (<anonymous>)

    at HttpHeaders.lazyInit (http.js:117)

    at HttpHeaders.init (http.js:265)

    at HttpHeaders.forEach (http.js:368)

indicates, that your Header (Authorization) is null and therefore can't be read.

try to change the line to:

if(this.jwtToken==null) this.jwtToken = this.authenticationService.loadToken();

now you should see your request in the network panel

or maybe you just want to check the token on the authenticationService itself:

if(this.authenticationService.jwtToken==null) this.authenticationService.loadToken();

    return this.http.get(this.host+"/userByUsername?username="+username

      , {headers:new HttpHeaders({'Authorization':this.authenticationService.jwtToken})}

);