Angular - Get data using basic auth

Question

I have been working with angular 6.0.0. I have a REST API with basic auth and it works fine on Postman but it gives an error in my service as below

401 (Unauthorized)

Here is my code:-

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import { struct_paket } from './data';

@Injectable({
  providedIn: 'root'
})
export class AppserviceService {

  constructor(private http: Http) { }
  auth(headers: Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('admin:310b5678eece63336e4698d2722aad91'));
  }

  getpaket() {
    let headers = new Headers();
    this.auth(headers);

    return  this.http.get('www.example.com/api', {
      headers: headers
    }).map(res => res.json() as struct_paket );


  }
}

UPDATE

service.ts

export class AppserviceService {

constructor(private http: HttpClient) {}

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization:
        'Basic YWRtaW46MzEwYjU2NzhlZWNlNjMzMzZlNDY5OGQyNzIyYWFkOTE='
    })
  };
  get() {
    return this.http.get<struct_paket>('http:www.example.com/api', this.httpOptions)
  }
}

and call it in component.ts

this._service.get()
    .subscribe(x=>
      {
        this.Pakets = x
      },error =>{console.log(error);}
    );

Answer 1

Update headers after appending

Try

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import { struct_paket } from './data';

@Injectable({
  providedIn: 'root'
})
export class AppserviceService {
  headers : Headers;
  constructor(private http: Http) { }
  auth() {
    this.headers = this.headers.append('Authorization', 'Basic ' +
      btoa('admin:310b5678eece63336e4698d2722aad91'));
  }

  getpaket() {
    this.headers = new Headers();
    this.auth();

    return  this.http.get('www.example.com/api', {
      headers: headers
    }).map(res => res.json() as struct_paket );


  }
}

Answer 2

Headers is now moved to '@angular/common/http' and name is also changed Headers to HttpHeaders.

Example:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class TestService {
  constructor(private http: HttpClient) {}

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization':'Basic' +  btoa('admin:310b5678eece63336e4698d2722aad91'))
    })
  };
  call() {
    return this.http
      .get<struct_paket>('www.example.com/api', this.httpOptions)
  }
}