Кнопка Angular 5 Material дает неверную ошибку длины массива после щелчка, чтобы отправить идентификатор и сгенерировать токен

Я пытаюсь использовать JWT с угловым 5 и PHP для генерации токена. По причинам тестирования я зашифровал userid переменная с помощью CryptoAESJs библиотека и отправить его через post метод к php скрипту:

getToken()
{
let userid = 123;
let key = "coded";
let encUserID = crypto.AES.encrypt(userid, key);
const headerOptions = new HttpHeaders().set
('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
const params = new HttpParams().set('userID', encUserID);

this.http.post('http://aff.local/jwtTest.php', params, {
headers: headerOptions,
responseType: 'json'
}).subscribe(
res=>{
console.log(res);
},
error=>{
console.log(error);
}
)
}

Я отправляю его на скрипт PHP:

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application\JSON');
header('Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS');
header('Access-Control-Allow-Headers: *');
error_reporting(E_ALL);

require_once "CryptoJSAES.php";
require_once('JWT.php');

ini_set('log_errors', 0);
ini_set('display_errors', 1);

$key = "coded";
$id = $_POST['userID'];
$token = CryptoJSAES::decrypt($id,$key);

$jwt = JWT::encode($token, $key);


$jwtDecode = JWT::decode($jwt, $key, array('HS256'));

echo json_encode($jwtDecode);
?>

Внутри моего app.component.htmlЯ добавил кнопку:

<button mat-raised-button  (click)='getToken()'>Click Me</button>

Так что запустите getToken() метод, когда происходит событие клика.

После нажатия я получил следующую ошибку на консоли:

ОШИБКА RangeError: Неверная длина массива

в WordArray.init.clamp (core.js: 272)

в WordArray.init.concat (core.js: 237)

на Object.pad (cipher-core.js: 415)

в Object._doFinalize (cipher-core.js: 492)

в Object.finalize (cipher-core.js: 163)

в Object.encrypt (cipher-core.js: 675)

в Object.encrypt (cipher-core.js: 833)

в Object.encrypt (cipher-core.js: 201)

на AppComponent.push ../ src / app / app.component.ts.AppComponent.getToken
(App.component.ts: 20)

в Object.eval [as handleEvent] (AppComponent.html: 1)

Это проблема с материалом? Или с браузером? Или это проблема со значением, отправленным из Angular в PHP?

РЕДАКТИРОВАТЬ

//Imports
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import * as crypto from 'crypto-js';