core.js:478 Uncaught Error: Malformed UTF-8 Data When Decrypting Url Query Param in Angular - node.js

Question

I have a crypto encrypt and decrypt service below and I use it throughout my application to encrypt and decrypt localstorage items. While it works perfectly fine for the localstorage items, when I try to decrypt an encrypted object sent through queryparams, I get the following error:
core.js:478 Uncaught Error: Malformed UTF-8 data
my encrypt/decrypt service is:
export class AESEncryptDecryptService {
secretKey = 'My secret string';
constructor() { }
encrypt(value? : string) : string{
if(!isNil(value)) {
return CryptoJS.AES.encrypt(value, this.secretKey.trim()).toString();
}
}
decrypt(textToDecrypt?){
if(!isNil(textToDecrypt)) {
return CryptoJS.AES.decrypt(textToDecrypt, this.secretKey.trim()).toString(CryptoJS.enc.Utf8);
}
}
}
How I encrypt the object before I sent it:
const user= new User();
this.qrUrl = `${environment.someurl}` +'currentUser=' +this._AESEncryptDecryptService.encrypt(JSON.stringify(user).toString()).toString();
How I decrypt the object:
const url_string = window.location.href;
const url = new URL(url_string);
if(url.searchParams.get('user')) {
this.qrDevice = JSON.parse(this._AESEncryptDecryptService.decrypt(url.searchParams.get('user')));
}
I tried it without the string and by debugging. The same code works fine for other uses but gives this error on url query decrypt.
One thing I noticed is that the query string is replacing the + in the string with a space. How can I fix this and preserve the + sign? the expected and actual of the encrypted objects are posted below.
Expected after object parse from url:
U2FsdGVkX1+8y4FZ0cDq5ikapUndRA+tE5BAVqYPH9NnhBWeea1asYo5zCU80s/6FWKnFU8FghXv7JxPWwnPpJtCR+eXIGpiGBWq4gpq00PoeIuU2jPsDeifSu8aDrFr+D8abcdkIil5WmsHiND5TwVfWHhaBDSSlYMSXbiUXx9DQgRipEAtXXgMEO/r7G5wpuJ9ekEzUfkgXIO3eM/tP6dMu2iWZwbXTDvBZl93J8XZ259YRtIkRXgolSGS2t9yvQOn9I7fobRI1NSCIAftQtGdj/k9pu4B9reicnw9wiNR4dmp8+cpI/3TQSevhwp
Actual after object parse from url:
U2FsdGVkX1 8y4FZ0cDq5ikapUndRA tE5BAVqYPH9NnhBWeea1asYo5zCU80s/6FWKnFU8FghXv7JxPWwnPpJtCR eXIGpiGBWq4gpq00PoeIuU2jPsDeifSu8aDrFr D8abcdkIil5WmsHiND5TwVfWHhaBDSSlYMSXbiUXx9DQgRipEAtXXgMEO/r7G5wpuJ9ekEzUfkgXIO3eM/tP6dMu2iWZwbXTDvBZl93J8XZ259YRtIkRXgolSGS2t9yvQOn9I7fobRI1NSCIAftQtGdj/k9pu4B9reicnw9wiNR4dmp8 cpI/3TQSevhwp

Answer 1

Issue was resolved by changing the qrurl to the following:
this.qrUrl = `${environment.qrOrderURL}user=`+encodeURIComponent(this._AESEncryptDecryptService.encrypt(JSON.stringify(user)));