Garbage value at the beginning of decrypted text (AES 128 bit) when encrypting from angular 8

My backend AES-128 decryption logic is correct as when i do AES-128 encryption in java then it decrypts it properly. Now i tried to replicate the encryption logic in Angular 8, and then the decrypted text now contains garbage value at the initial bytes and remaing half string is correct (something like this ��da%:���mL���͔1″,”add”:”uk”,”com”:”wow”}).

Below is my angular code for encryption

encryptData(value: any) {
    var iv = CryptoJS.enc.Base64.parse(this.generateIV());
    var key = CryptoJS.enc.Hex.parse('0123456789abcdef0123456789abcdef');
    var aesEncrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(value.toString()), key,{
        keySize: 128 / 8,
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });

    console.log(JSON.stringify({
                        payloadToken: this.getRSAEncryption("0123456789abcdef0123456789abcdef"), 
                        payloadVariable: aesEncrypted.iv.toString() , 
                        payloadText: aesEncrypted.toString()}
                ));
    return aesEncrypted.toString();

  }

generateIV() {
    var key = "";
    var hex = "0123456789abcdef";

    for (var i = 0; i < 15; i++) {
      key += hex.charAt(Math.floor(Math.random() * 15));
    }
    return key;
  }

and below is my decryption logic in java

public static String packetDecryption(String requestPacket){
      DecryptedTokenPacket decryptedTokenPacket = GSON.fromJson(requestPacket, 
      DecryptedTokenPacket.class);
      SecretKey key2 = new SecretKeySpec(decryptedTokenPacket.getDecData(), 0, 
      decryptedTokenPacket.getDecData().length, EncConstants.ENC_ALGO);
      // Instantiate the cipher
     Cipher cipher = Cipher.getInstance(EncConstants.CBC_ALGO);
     byte[] ivBytes = new Base64().decode(decryptedTokenPacket.getPayloadVariable());
     cipher.init(Cipher.DECRYPT_MODE, key2, new IvParameterSpec(ivBytes));
     byte[] encryptedTextBytes = new Base64().decode(decryptedTokenPacket.getPayloadText());
     byte[] decryptedTextBytes;
     decryptedTextBytes = cipher.doFinal(encryptedTextBytes);
     return new String(decryptedTextBytes);
}

//this function is used in the gateway for decrypting the secret key and then pass through
public DecryptedTokenPacket decryptKeyUsingRSA(EncryptedPacket encryptedPacket){
                Cipher cipher = Cipher.getInstance(RSA_ALGO);
                cipher.init(Cipher.DECRYPT_MODE, privateKey);
                byte[] decData = cipher.doFinal(new Base64().decode(encryptedPacket.getPayloadToken()));
                decryptedTokenPacket.setPayloadText(encryptedPacket.getPayloadText());
                decryptedTokenPacket.setPayloadVariable(encryptedPacket.getPayloadVariable());
                decryptedTokenPacket.setDecData(decData);
return decryptedTokenPacket;
}

Beans

public class DecryptedTokenPacket {
    private String payloadVariable;
    private String payloadText;
    private byte[] decData;
}

public class EncryptedPacket {
    private String payloadVariable;
    private String payloadText;
    private String payloadToken;
}

Not sure what is causing this garbage value at the beginning. Can someone help me with this issue?

Source: New feed
Source Url Garbage value at the beginning of decrypted text (AES 128 bit) when encrypting from angular 8