why doesnot call my angular frontend & springboot backend

Question

I try to connect angular frontend & springboot backend...

I try to call save method.(post mapping add method) but it doesnot call and there are no errors...!.but from frontend it shows all the values passed. I can't find where is the error.I try to make new project & copy my codes but still i have this error

this is the component.ts file...

import { Component, OnInit, ViewChild } from '@angular/core';
import { DynamicFormComponent } from 'src/app/components/core/dynamic-form/dynamic-form.component';
import { Occupationdto } from 'src/app/dto/occupationdto';
import { OccupationDynamicService }from'../../../../service/occupation-dynamic.service';

@Component({
selector: 'app-occupation-dynamic',
templateUrl: './occupation-dynamic.component.html',
styleUrls: ['./occupation-dynamic.component.css']
})
export class OccupationDynamicComponent implements OnInit {

constructor(private occ: OccupationDynamicService) { }

@ViewChild(DynamicFormComponent) form: DynamicFormComponent;
pageName = 'Occupation';

id = 'none';
occu: Occupationdto = null;
occupation1: Occupationdto = new Occupationdto();
manually = false;

ngOnInit() {
}


submit(value: any) {
console.log(value);

this.occu = new Occupationdto();

this.occu.occupationId = 'O001';
this.occu.code = 'COD001';
this.occu.createBy = 'nuwanNad';
this.occu.createDDate = '2019-01-01';
this.occu.isEnable = 1;
this.occu.modifyBy = 'new1';
this.occu.modifyDate = '2019-02-02';
this.occu.name = 'nuwanNadeera';
this.occu.sName = 'nuwan';

this.occ.saveOccupation(this.occu);
}

}

this is the springboot backend controller...

package lk.arpico.proddb.controller;    
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import lk.arpico.proddb.dto.NumberParamDto;
import lk.arpico.proddb.dto.OccupationDto;
import lk.arpico.proddb.entity.NumberParamsEntity;
import lk.arpico.proddb.entity.OccupationEntity;
import lk.arpico.proddb.service.OccupationService;

@RestController
@RequestMapping("occupation")
@CrossOrigin("*")
public class OccupationController {

@Autowired
private OccupationService occupationService;

@PostMapping("/add")
public void add(@RequestBody OccupationDto occupation) {
    occupationService.add(occupation);
    System.out.println("malinga"+occupation);
}

}

this is the backend properties file...

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://localhost:3306/InsuranceQuatation2? 
createDatabaseIfNotExist=true&useSSL=false
spring.datasource.username=root
spring.datasource.password=1997
spring.jpa.show-sql=true
server.port=8095
spring.jpa.hibernate.use-new-id-generator-mappings: true
spring.jpa.database-platform: 
org.hibernate.dialect.MySQL5InnoDBDialect
# ADMIN (SpringApplicationAdminJmxAutoConfiguration)
spring.application.admin.enabled=true
spring.application.admin.jmx- 
name=org.springframework.boot:type=Admin,name=SpringApplication

below one is relevant angular Service...

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Occupationdto } from '../dto/occupationdto';
import { Observable } from 'rxjs';


export const MAIN_URL = 'http://localhost:8085';

const URL = '/api/v1/Occupation_Dynamic';

@Injectable()
export class OccupationDynamicService {

constructor(private http: HttpClient) { }

saveOccupation(occupation: Occupationdto): Observable<boolean> {
console.log('save occupation now');
console.log(occupation);
return this.http.post<boolean>('http://localhost:8095/occupation/add' 
, occupation);
}

}

so anyone can tell me where is the mistake here....?

What does the network tab in your google chrome dev tools say? Was the request even sent? If it was what was the address it was sending it to? — O.MeeKoh, Mar 18 '19 at 21:31
Possible duplicate of [Angular 2 http get not getting](https://stackoverflow.com/questions/41381200/angular-2-http-get-not-getting) — Alexander Staroselsky, Mar 18 '19 at 21:45
You are not executing `subscribe()` against `saveOccupation()`, therefore the HttpClient call is not actually being executed. You need to execute `subscribe()`, even if you do no not need anything from the response. — Alexander Staroselsky, Mar 18 '19 at 21:45

score 1 · Answer 1 · answered Mar 18 '19 at 23:01

This is probably a case of 'cold Observable'. Every http call (get, post, put, delete) returns 'cold' Observable which means that you need to subscribe on observable to return a result. Inside your component.ts file:

this.occ.saveOccupation(this.occu)
    .subscribe((data) => {
         // do what you want...
    });

Read more about hot and cold observables: https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339

why doesnot call my angular frontend & springboot backend

1 Answers1