I'm encountering an issue with HttpClient while using Angular 5. The problem is that HttpClient doesn't seem to send any request (no xhr log appears in the console) on two specific components. However, it works perfectly fine on other components.
When I call the ApiService POST method (a custom service acting as a wrapper for HttpClient) from Component A, everything runs smoothly. But when calling the same method from Component B, HttpClient appears to freeze.
My application has numerous components utilizing ApiService and all dependencies are injected correctly. I'm puzzled about what could be causing this problem.
--- reply
ApiService.ts
@Injectable()
export class ApiService
{
private errorListeners : Map<string, Array<(details ?: any) => any>> = new Map<string, Array<(details ?: any) => any>>();
public constructor(private http: HttpClient)
{
}
public post<T>(path : string, data : any, urlParams : any = null) : Observable<any>
{
return this.http.post<T>(`${environment.api.path}${path}`, data, {
params: urlParams
}).catch(this.catchErrors()).map(response => {
if (response['Error']){
throw response['Error'];
}
return response;
});
}
}
-- Component
@Component({
selector: 'login-register-component',
templateUrl: './register.component.html',
styleUrls: [
'./../../assets/main/css/pages/login.css'
]
})
export class RegisterComponent implements OnInit, OnDestroy
{
public constructor(private route: ActivatedRoute,
private router: Router,
private userService : UserService,
private apiService: ApiService
)
{
this.apiService.post('/some-endpoint', null, {}).subscribe(res => {
console.log(res);
});
}
Even when directly injecting HttpClient into the Component, HttpClient fails to work properly.
-- Another component within the same module example call: (it works)
public loginTraditionalMethod(emailAddress : string, plainPassword : string)
{
this.apiService.post('/auth/email', {
email: emailAddress,
password: plainPassword
}, {}).subscribe(res => {
console.log(res);
})
}