I am encountering a problem in my Angular 2 application written in TypeScript where the browser is not making HTTP calls. I am unable to see any HTTP requests in the network section of the browser, even though my Angular code works fine when there are no HTTP calls in the service. However, it fails to make any HTTP requests when I do include HTTP calls.
Below is the code snippet:
<script src="~/lib/es6-shim.min.js"></script>
<script src="~/lib/system-polyfills.js"></script>
<script src="~/lib/shims_for_IE.js"></script>
<script src="~/lib/angular2-polyfills.js"></script>
<script src="~/lib/system.js"></script>
<script src="~/lib/Rx.js"></script>
<script src="~/lib/angular2.dev.js"></script>
<script src="~/lib/http.dev.js"></script>
<script src="~/lib/router.dev.js"></script>
SERVICE :
import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class AuthService {
private _authPath = 'http://api/Auth';
constructor(private http: Http) { }
getAuthSettings() {
return new Promise((resolve, reject) => {
return this.http.get(this._authPath).toPromise().then((val: Response) => resolve(val.text()));
});
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
Main MODULE :
import { Component } from 'angular2/core';
import {AuthService} from './auth.service';
import {OnInit} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
@Component({
selector: "main-app",
template: "{{title}}",
providers: [HTTP_PROVIDERS, AuthService]
})
export class AppComponent implements OnInit {
public title: string = '';
constructor(private _authService: AuthService) {
}
ngOnInit() {
this._authService.getAuthSettings().then((val: string) => {
this.title = val;
});
}
};