What is causing Angular 6 to fail in sending HTTP Get/Post requests?

Question

What is causing Angular 6 to fail in sending HTTP Get/Post requests?

In Angular 6, I have created a LoginService like this:

@Injectable()
export class LoginService {
    constructor(private http: HttpClient) { }

    login(): Observable<boolean> {
        var url = `${environment.baseAPIUrl}${environment.loginUrl}`;

        return this.http.get<boolean>(url);
    }
}

Now, I am calling this service from my LoginComponent:

@Component({
    selector: 'bpms-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

    constructor(private loginService: LoginService) { }

    ngOnInit() {
    }

    login() {
        var self = this;
        self.loginService.login();
    }
}

I am facing an issue where my request is not being sent. Any idea why?

https://i.sstatic.net/jFf1A.png

angular typescript httpclient angular6

Answer 1

Answer №1

Observable is only triggered when a subscription is made to it. The Http API method returns an Observable, simply creating the observable does not initiate an API request.

self.loginService.login().subscribe(
  (data) => console.log('Successfully logged in')
);

Answer 2

Observable is only triggered when a subscription is made to it. The Http API method returns an Observable, simply creating the observable does not initiate an API request.

self.loginService.login().subscribe(
  (data) => console.log('Successfully logged in')
);

Answer 3

Answer №2

Http Requests are only initiated once the observable is subscribed to.

@Component({
selector: 'bpms-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

constructor(private loginService: LoginService) { }

ngOnInit() {
}

login() {
    var self = this;
    self.loginService.login().subscribe();
 }
}

Answer 4

Http Requests are only initiated once the observable is subscribed to.

@Component({
selector: 'bpms-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

constructor(private loginService: LoginService) { }

ngOnInit() {
}

login() {
    var self = this;
    self.loginService.login().subscribe();
 }
}

Answer 5

Answer №3

Make sure to execute your login function by calling it, such as in the ngOnInit() method or on form submission events.

Additionally, be sure to update your login function to resemble the following code:

login() {
    this.loginService.login()
        .subscribe((res) => console.log('response from login() function'));
}

Answer 6

Make sure to execute your login function by calling it, such as in the ngOnInit() method or on form submission events.

Additionally, be sure to update your login function to resemble the following code:

login() {
    this.loginService.login()
        .subscribe((res) => console.log('response from login() function'));
}

Answer 7

Answer №4

In the case where your return type is Observable<, it is necessary to subscribe to it in order to receive a response once it becomes available. This means that your code will resemble something like the following:

@Component({
selector: 'bpms-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

constructor(private loginService: LoginService) { }

ngOnInit() {
}

login() {
    var self = this;
    self.loginService.login().subscribe();
 }
}

Answer 8

In the case where your return type is Observable<, it is necessary to subscribe to it in order to receive a response once it becomes available. This means that your code will resemble something like the following:

@Component({
selector: 'bpms-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

constructor(private loginService: LoginService) { }

ngOnInit() {
}

login() {
    var self = this;
    self.loginService.login().subscribe();
 }
}

What is causing Angular 6 to fail in sending HTTP Get/Post requests?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Identify the appearance of a web component being added to the Document Object

In Typescript, encountering a member of a union type with an incompatible signature while utilizing the find method on an array of

"Classes can be successfully imported in a console environment, however, they encounter issues when

How to conditionally apply a directive to the same tag in Angular 4

Executing npm prepublish on a complete project

Guide on how to utilize Protractor for end-to-end testing to access the scroll bar within the div

What are some ways I can incorporate fragments into my apollo-angular workflow?

What is the best way to invoke a function from a Service to a Component in Angular?

Is there a way to convert a File into a byte array and then save it in a database using Angular and ASP.Net Core?

How can I trim a value using one-way data binding in Angular?

Developing a Library for Managing APIs in TypeScript

What is the best way to integrate Angular material into a Bazel-enabled project for a custom library development?

Maintain the spacing of an element when utilizing *ngFor

Error encountered when attempting to implement Material Angular 2 autocomplete functionality

Uploading files using Remix.run: Transforming a File object into a string during the action

Retrieve the md-sidenav-layout element within a TypeScript file component

Encountered an error while trying to run the command "lite-server" in Angular 2

Having difficulty resolving the fs and child_process modules

Step-by-step guide: Mocking a fetch request in Jest using React with TypeScript

Using FIND to search an array object results in an error: Type 'undefined' is not compatible with type ''