web-dev-qa-db-fra.com

(TypeError: impossible de lire la propriété 'length' de null sur HttpHeaders.applyUpdate) Angular 5, Http Client

J'obtiens cette réponse lorsque je fais une demande http en service.

Voici le composant de connexion

export class LoginComponent {
  credentials: Credentials;

  constructor(
    private auth: AuthService,
    @Inject(UserService) private userService: UserService,
    @Inject(HttpClient) private http: HttpClient,
    private auth0: Auth0Service
  ) {}

  onLogin(credentials) {
    const sendReq = this.userService.login(credentials);
}

J'ai ajouté UserService dans les fournisseurs de App.module

Voici le UserService

@Injectable()
export class UserService {
  constructor(
    @Inject(Auth0Service) private authService: Auth0Service,
    protected http: HttpClient // @Inject(HttpClient) protected http: HttpClient
  ) {}
  login(credentials): Observable<any> {
    console.log(credentials);
    console.log(credentials.username);
    this.http
      .post("http://localhost:3000/api/Users/login", {
        username: credentials.username,
        password: credentials.password
      })
      .subscribe(
        data => {
          console.log(data);
        },
        err => {
          console.log("Something went wrong!");
          console.log(err);
        }
      );
    return credentials;
    // this.auth.login(credentials);
  }
}

Voici la console

    at MergeMapSubscriber._innerSub (mergeMap.js:138)
    user.service.ts:14 
{username: "hamzakpt", password: "hamza"}
    user.service.ts:15
 hamzakpt
    user.service.ts:26 Something went wrong!

    user.service.ts:27
 TypeError: Cannot read property 'length' of null
        at HttpHeaders.applyUpdate (http.js:308)
        at eval (http.js:255)
        at Array.forEach (<anonymous>)
        at HttpHeaders.init (http.js:255)
        at HttpHeaders.forEach (http.js:354)
        at Observable.eval [as _subscribe] (http.js:2153)
        at Observable._trySubscribe (Observable.js:172)
        at Observable.subscribe (Observable.js:160)
        at subscribeToResult (subscribeToResult.js:23)
        at MergeMapSubscriber._innerSub (mergeMap.js:138)

La même demande get fonctionne dans LoginComponent mais pas dans UserService. UserService est un service global tandis que Login se trouve dans un module différent.

J'ai également ajouté HTTPClientModule dans app.module et Login Module.

angularhttpclientangular5
10
Alamgir Qazi

essayez comme ceci:

service.ts

login(credentials): Observable<any> {
    return this.http.post("http://localhost:3000/api/Users/login", {
        username: credentials.username,
        password: credentials.password
    }).map(data => data.json())
}

component.ts

onLogin(credentials) {
    this.userService.login(credentials)
        .subscribe(data => {
            console.log('data', data);
        }, (error) => {
            console.log('error', error);
        })
}
3
Chandru

Ne définissez pas de valeur nulle dans l'en-tête

J'ai fait face à ce genre de problème. Le problème était dans l'en-tête, je poussais la valeur nulle, c'est-à-dire.

cloned = req.clone({
    headers: req.headers.append('token', token) // token = null
})

pour résoudre ce problème, je vérifie le jeton avant de le mettre dans l'en-tête, c'est-à-dire.

if (token) {
    cloned = req.clone({
        headers: req.headers.append('token', token)
    })
}
8
WasiF