AngularからPOST経由でSpringbootにデータを送信する

フロントエンドの角度のプロジェクトから、1つのjsonをスプリングブートであるバックエンドに送信しようとしています。

私はこれら2つのテクノロジーを使用するのは初めてなので、経験が不足しています。

Angularのhttp postメソッドが間違っているのか、バックエンドが来るはずのデータをリッスンしていないのか、私にはよくわかりません。

両方のコード部分を添付して、あなたが私を助けられるようにします。前もって感謝します！

これがChromeコンソールの画像です：Http Errorcode 404 httpエラー画像

バックエンド：

@RestController
@RequestMapping
@CrossOrigin(origins = "http://localhost:4200")
public class RequestController {

    private RolesRequestRepository rolesRequestRepository;

    @PostMapping("/sendrolesrequest")
    void addRequest(@RequestBody RolesRequest rolesRequest) {
        rolesRequestRepository.save(rolesRequest);
    }

    @GetMapping("/sendrolesrequest")
    public List<RolesRequest> getRequests() {
        return (List<RolesRequest>) rolesRequestRepository.findAll();
    }

}


@Entity
public class RolesRequest {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private long id;
    private String requester = "";
    private String recipient = "";

    public RolesRequest(String recipient, String requester) {
        this.recipient = recipient;
        this.requester = requester;
    }

    public RolesRequest(){

    }

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getRequester() {
        return requester;
    }

    public void setRequester(String requester) {
        this.requester = requester;
    }

    public String getRecipient() {
        return recipient;
    }

    public void setRecipient(String recipient) {
        this.recipient = recipient;
    }
}

これは角度のあるフロントエンド部分です：

@Injectable()
export class RequestService {
  sendRolesRequestUrl = 'sendrolesrequest';  // URL to web api
  private handleError: HandleError;

  constructor(
    private http: HttpClient,
    httpErrorHandler: HttpErrorHandler) {
    this.handleError = httpErrorHandler.createHandleError('RequestService');
  }

  sendRolesRequest (rolesRequest: RequestModel): Observable<RequestModel> {
    //console.log("addRolesRequest try post:" + rolesRequest.print());
    return this.http.post<RequestModel>(this.sendRolesRequestUrl, rolesRequest, httpOptions)
      .pipe(
        catchError(this.handleError('sendRolesRequest', rolesRequest))
      );
  }

  testPost() {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json; charset=utf-8');
    this.http.post(this.sendRolesRequestUrl, {'key1': 'value1', 'key2': 'value2'}, httpOptions)
      .subscribe(() => {}, err => console.error(err));
  }
}

export class RequestFormulaComponent implements OnInit {

  onSendRequest() {
    this.requestService
      .sendRolesRequest(this.rolesRequest)
      .subscribe();
  }
}

誰かが私を助けてくれたら、私はとても幸せです。私はこのトピックについて一週間以上も苦労しています。それは、バックエンドアプリケーションがWebページと通信する方法でさえありますか？そうでない場合、それ以外の場合はどうすればよいですか？