Angular 5 - Cannot use response from GET request - get

Question

I've been at this and looking for a solution for two days now. Hoping someone can help me. I'm new to Angular 5.
I'm trying to utilize the WP REST API for a front page application. After following this tutorial:
http://techattitude.com/tips-tricks-and-hacks/how-to-remotely-create-a-user-on-your-wordpress-website-using-json-api-request/
I found that the there is a response that comes through, but I cannot access the response. I'm trying to console.log() the response value and nothing is appearing. Here is my code below, please have a look and let me know what I'm doing wrong. I have implemented my GET request through a service.
api-config-nonce.ts
export interface ApiConfigNonce {
status: String,
controller: String,
method: String,
nonce: String
}
auth.service.ts
import { EventEmitter, Injectable } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { ModalService } from '../services/modal.service';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';
import { ApiConfigNonce } from '../api-config-nonce';
#Injectable()
export class AuthService {
apiHost:string = 'http://localhost/';
apiBase:string = 'b0ffv3BH7K6h/';
email:string;
password:string;
userSignIn = new EventEmitter<object>();
constructor(private http:HttpClient, private modalService:
ModalService){
}
login(email, password){
console.log('login()');
let options = {
"insecure":"cool",
"email":email,
"password": password
}
return this.http.post(this.apiHost + this.apiBase +
'user/generate_auth_cookie/' , options);
}
getNonce(){
return this.http.get<ApiConfigNonce>(this.apiHost + this.apiBase +
'get_nonce/?controller=user&method=register')
.map(res => res);
}
newUser(username, email, password, firstname, lastname, nonce){
return this.http.get(this.apiHost + this.apiBase + 'user/register/?
username='+ username + '&email=' + email + '&nonce=' + nonce +
'&first_name=' + firstname + '&last_name=' + lastname);
}
}
sign-up.component.ts
import { Component, OnInit, AfterViewInit, ViewChild } from
'#angular/core';
import { FormsModule } from '#angular/forms';
import { NgForm } from '#angular/forms';
import { UsersService } from '../../services/users.service';
import { AuthService } from '../../services/auth.service';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-sign-up',
templateUrl: './sign-up.component.html',
styleUrls: ['./sign-up.component.scss']
})
export class SignUpComponent implements OnInit, AfterViewInit {
#ViewChild('f') signupForm: NgForm;
signUpDetails:object;
busyProcessing:boolean = false;
errorMessage:string = null;
token:string = null;
userId:number = null;
nonce:any;
constructor(private usersService: UsersService, private authService:
AuthService, private http:HttpClient) { }
ngOnInit() {
this.getNonce();
}
ngAfterViewInit(){
}
getNonce(){
console.log('getNonce()');
this.authService.getNonce()
.subscribe(
data => {
this.nonce = JSON.stringify(data);
console.log(data);
},
(error)=>{
this.onError(error);
console.log(error);
}
);
console.log(this.nonce);
}
onError(response){
switch (response.error.code) {
case 406:
this.errorMessage = "Either that email or username is already in
use";
break;
case 403:
this.errorMessage = "Failed to authorize, please try again later";
default:
this.errorMessage = "There was an error signing you up, please try
again";
break;
}
this.busyProcessing = false;
}
}
The function in my component that is utilizing my service is getNonce(). I'm not sure why when I test the endpoints on postman I can see the response but cannot assign that response to a variable to use it. It renders this error:
"Http failure response for (unknown url): 0 Unknown Error"
Any help would be very appreciated.