Angular 6 - setting up HTTP, Login Services, Interceptor

I am trying to set up the token login service, http service and interceptor (for setting headers), but I am having issues since I haven't done it before, and I believe few things are different in Angular 6 compared to 5.

This is my code for Login service:

import Injectable, Injector from '@angular/core';
import LoginModel, UserModel from "../models/user.model";
import Http, RequestOptions, Headers, Response from '@angular/http';
import Router from '@angular/router';

import map, filter, switchMap from 'rxjs/operators';
import environment from '../../../environments/environment';

@Injectable()
export class LoginService
public token: string;
private userLoginURL = environment.apiUrl + '/auth/epvlogin';

constructor(private http: Http, private injector: Injector)
const token = JSON.parse(localStorage.getItem('Token'));
this.token = token && token.token;


getToken(): string
return localStorage.getItem('Token');


setToken(token: string): void
localStorage.setItem('Token', token);


static getUser(): UserModel
const object = JSON.parse(sessionStorage.getItem('User'));
return object.user;


handleError(error)
const router = this.injector.get(Router);
if (error.rejection.status === 401

isAuthenticated()
const promise = new Promise(
(resolve, reject) =>
resolve(this.getToken());

);
return promise;


login(user: LoginModel)

return this.http.post(this.userLoginURL, user)
.pipe(map((response: Response) =>
const token = response.json() && response.json().token;
if (token)
this.token = token;

localStorage.setItem('Token', JSON.stringify(token: token));
localStorage.setItem('User', JSON.stringify(user: response.json()));
// sessionStorage.setItem('Token', JSON.stringify(token: token));
// sessionStorage.setItem('User', JSON.stringify(user: response.json().user));
return response;
else
return false;

));





Then I have the HTTP request service:

import Injectable from '@angular/core';
import Observable from "rxjs";
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/toPromise';
import Router from '@angular/router';
import HttpClient, HttpErrorResponse, HttpHandler, HttpHeaders from '@angular/common/http';
import 'rxjs/add/operator/catch';
import catchError, map from "rxjs/operators";

@Injectable()
export class HttpRequestService


constructor(private http: HttpClient, private router: Router)


handleError(error: any)

if (error.status && error.status === 401)
this.router.navigate(['/sign-in']);
return;


let errMsg: any;
errMsg = error.error.message ? error.error.message : error.toString();

if (errMsg === 'User does not exist!')
this.router.navigate(['/sign-in']);
return;


console.log(errMsg);
return Observable.throw(errMsg);


get(url: string)
const result = this.http.get(url)
.pipe(map((response: Response) =>

return response;
),
catchError((response) => this.handleError(response))
);

return result;


post(url: string, request: any)
const result = this.http.post(url, request)
.pipe(map((response: Response) =>

return response;
),
catchError((response) => this.handleError(response))
)
return result;


delete(url: string)
const result = this.http.delete(url)
.pipe(map((response: Response) =>
if (response == null)
return null;


return response;
),
catchError((response) => this.handleError(response)))
return result;


put(url: string, request: any)
const result = this.http.put(url, request)
.pipe(map((response: Response) =>

return response;
),
catchError((response) => this.handleError(response)))
return result;


postMultipart(url: string, data: any, files: File)
const formData: FormData = new FormData();
formData.append('data', JSON.stringify(data));
for (const file of files)
formData.append(file.name, file);

const result = this.http.post(url, formData)
.pipe(map((response: Response) =>

return response;
//
),
catchError((response) => this.handleError(response))
);
return result;

}


I am getting multiple errors then, and no idea why. I added all services to providers in app module. These are the errors i am getting:

1 Answer
1

RxJS 6 has some differents object.

For example Http is now HttpClient

Http

HttpClient

Catch is now CatchError

Catch

CatchError

You need to read RxJS 6 migration specs

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.