Post Payload issue when using NGRX-Hateoas (angular) and Spring Hateoas (HAL)

Currently We have a Spring Hateoas (HAL) implementation in the backend and manually handle the communication with our angular client which is working fine.

I started to look for libs (seems like no one is using hateoas) for angular so i found ngrx-hateoas so we have sort of a support for hypermedia state handling.

It started promising but i realizing that it is not really flexible in terms of working with spring-hateoas (hal).

Currently i defined an action (to post login details {username: "", password: ""}) but the payload which is end to the backend is always empty.

the store

export const initialLoginVm = {
username: "",
password: ""
}

export const AppStore = signalStore(
{ providedIn: 'root' },
withInitialHypermediaResource('rootApi', initialDynamicResource, "http://localhost:4200/api"),
withHypermediaResource('loginVm', initialLoginVm),
withHypermediaAction('login'),
withHooks({
onInit(store) {
store._connectLogin(store.loginVm, 'login');
}
})
);


This part triggers the post action:


const loginData = this.store0.getLoginVmAsPatchable()
loginData.username.set(this.loginForm.get('username').value);
loginData.password.set(this.loginForm.get('password').value);

this.store.login().then(
(onfulfilled) => {
console.log('onfulfilled', onfulfilled);
},
(onrejected) => {
console.log('onrejected', onrejected);
});


the metaprovider to get a chance using hal

import { MetadataProvider, ResourceAction, ResourceLink, ResourceSocket } from "@angular-architects/ngrx-hateoas";

export const HateoasMetadataProvider: MetadataProvider = {

isMetadataKey(keyName: string): boolean {
return true;
},
linkLookup(resource: unknown, linkName: string): ResourceLink | undefined {
return resource['_links'];
},
actionLookup(resource: unknown, actionName: string): ResourceAction | undefined {

// templates
let actionMetadataHref = resource['_links']?.['self']?.['href'];
let actionMetadataMethod = resource['_templates']?.['default']?.['method'];

if (resource['_embedded']) {
actionMetadataHref = resource['_embedded']?.[actionName]?.['_links']?.['self']?.['href'];
actionMetadataMethod = resource['_embedded']?.[actionName]?.['_templates']?.['default']?.['method'];
}

if (actionMetadataHref && actionMetadataMethod) return { href: actionMetadataHref, method: actionMetadataMethod };
else return undefined;
},
socketLookup(resource: unknown, socketName: string): ResourceSocket | undefined {
return resource['_sockets'];
}
}


the endpoint get part return

{
"_links": {
"self": {
"href": "http://localhost:4200/api/authn/password"
}
},
"_templates": {
"default": {
"method": "POST",
"properties": [
{
"name": "password",
"required": true,
"type": "text"
},
{
"name": "username",
"regex": "[0-9]",
"required": true,
"type": "text"
}
]
}
}
}


the post part is expecting

{
username: "abc"
password: "pw"
}


Any suggestion?

There are not a lot of ways to debug so i tried to a lot but was not able to have a filled payload in the post request it is always empty {}

Continue reading...