Resolving AR.js Errors in Angular Project Using A-Frame for Marker-based AR

Do you want to request a feature or report a bug? bug

What is the current behavior?

How can I resolve the errors that are being thrown in my Angular project when using AR.js with A-Frame?

I am attempting to incorporate AR.js into my Angular project, specifically using Marker-based AR with A-Frame. To start, I have installed A-Frame via NPM and imported it into my 'pollyfills.ts' file using the statement 'import aframe'.

Next, I downloaded the JavaScript file from the documentation using the following link: "https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js". In order for it to work properly, I am loading it within Angular specifically in the 'ngOnInit' method using the code:

ngOnInit(): void {
    const ar= require('../../assets/ar_aframe.js');
}

, which seems to be functioning correctly. This means that the webcam is being loaded, and the objects are being recognized. This is the HTML-Code:

<a-scene arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;" renderer="precision: medium;"
    vr-mode-ui="enabled: false" cursor="fuse: true;rayOrigin: mouse">
    <a-entity camera raycaster="objects: .clickable">
      <a-marker type="barcode" value="1" size="0.7">
        <a-box  position="0 0 0"
          material="opacity: 0.9; side: double;color:white;" class="clickable" width="2" height="2" depth="2"
          (click)="test($event,1)" geometry="primitive: box" aabb-collider>
        </a-box>
      </a-marker>
    </a-entity>
  </a-scene>

However, I am encountering several errors in the console, which appear to be originating from AR.js. I have also attempted to include an older version of AR.js, but the same problem persists. During the installation of A-Frame via NPM, I made sure to use version 1.3.0.

ERROR TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at NewSystem.init (ar_aframe.js:1:1663386)
    at module.exports.System (aframe-master.js:28677:8)
    at new NewSystem (aframe-master.js:28775:12)
    at AScene.initSystem (aframe-master.js:27229:26)
    at module.exports.registerSystem (aframe-master.js:28785:15)
    at ar_aframe.js:1:1660640
    at ar_aframe.js:1:1664865
    at ar_aframe.js:1:1664871
    at ar_aframe.js:1:81
    at 4572 (ar_aframe.js:1:289)
and 3 of that one:

ar_aframe.js:1 Assertion failed: console.assert
b   @   ar_aframe.js:1
(anonymous) @   ar_aframe.js:1

How can I go about resolving these errors? It seems as though they are related to the AR.js library.

If the current behavior is a bug, please provide the steps to reproduce.

Please mention other relevant information such as the browser version, Operating System and Device Name Chrome 114.0.5735.199

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

AR-js-org / AR.js

Resolving AR.js Errors in Angular Project Using A-Frame for Marker-based AR #553