0

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....?

3
  • 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? Commented Mar 18, 2019 at 21:31
  • 1
    Possible duplicate of Angular 2 http get not getting Commented Mar 18, 2019 at 21:45
  • 1
    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. Commented Mar 18, 2019 at 21:45

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.