Why can't I inject @angular/http?

Question

Please see my AppComponent class below:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  Authenticated: boolean = false;
  subscription: Subscription;

  constructor(private configurationService: ConfigurationService, private test: TestComponent) { }//, private securityService: SecurityService) { }

  ngOnInit() {
    console.log('app on init');
    //this.subscription = this.securityService.authenticationChallenge$.subscribe(res => this.Authenticated = res);

    //Get configuration from server environment variables:
    console.log('configuration');
    this.configurationService.load();     
  }

  title = 'app';
}

and my TestComponent class below:

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

  constructor() { }

}

It works as expected i.e. Http is injected into TestComponent. However, I want to change TestComponent to this:

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

  constructor(client: Http) { }

}

If I attempt to inject the Http class into any class, then my Angular app compiles, however a blank white screen appears (sometimes with the word: Loading). Why can't I inject @angular/http?