Not usable with Angular 9

[KlausHans]

Description:

• A-Frame Version: 1.0.4
• Platform / Device: Angular/Web

With Angular 9, aframe is not working. The three.js dependency throws an error:

ERROR in node_modules/three/src/geometries/ExtrudeGeometry.d.ts:2:10 - error TS2440: Import declaration conflicts with local declaration of 'UVGenerator'.

      2 import { UVGenerator } from './ExtrudeGeometry';
                 ~~~~~~~~~~~
      node_modules/three/src/materials/ShaderMaterial.d.ts:1:10 - error TS2440: Import declaration conflicts with local declaration of 'ShaderMaterialParameters'.

      1 import { ShaderMaterialParameters } from './ShaderMaterial';
                 ~~~~~~~~~~~~~~~~~~~~~~~~

I think the cause is this: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#local-and-imported-type-declarations-now-conflict

I noticed, that with aframe three 0.103 gets installed (i don't get it why the latest version 0.113 gets ignored from npm). Now i installed the latest three package (0.113.2) by hand, but since that i get another error:

ERROR in src/app/shared/glb-viewer/glb-viewer.component.ts:50:62 - error TS2345: Argument of type 'THREE.Object3D' is not assignable to parameter of type 'import("--snip--/ClientApp/node_modules/@types/aframe/node_modules/three/src/core/Object3D").Object3D'.
        Property 'applyMatrix' is missing in type 'THREE.Object3D' but required in type 'import("--snip--/ClientApp/node_modules/@types/aframe/node_modules/three/src/core/Object3D").Object3D'.

      50           const bbox = new AFRAME.THREE.Box3().setFromObject(mesh);
                                                                      ~~~~

        node_modules/@types/aframe/node_modules/three/src/core/Object3D.d.ts:169:3
          169   applyMatrix(matrix: Matrix4): void;
                ~~~~~~~~~~~
          'applyMatrix' is declared here.
      src/app/modules/ar/component/ar/ar.component.ts:166:64 - error TS2345: Argument of type 'THREE.Object3D' is not assignable to parameter of type 'import("--snip--/ClientApp/node_modules/@types/aframe/node_modules/three/src/core/Object3D").Object3D'.

      166             const bbox = new AFRAME.THREE.Box3().setFromObject(mesh);
                                                                         ~~~~
      src/app/modules/ar/component/ar/ar.component.ts:188:34 - error TS2345: Argument of type 'Mesh' is not assignable to parameter of type 'Object3D'.
        Type 'Mesh' is missing the following properties from type 'Object3D': customDepthMaterial, customDistanceMaterial, applyMatrix4, attach

      188       aimage.setObject3D('mesh', new AFRAME.THREE.Mesh(geometry, materials));

Any ideas?

[sandersdevelopment]

Did you solve your issue? I am interested in your solution and how you got it to work, that you can call "aimage.setObject3D(....)". How you integrated the Aframe Typings in Angular 9?

[Ezema-Ugonna-Donald]

Did you solve your issue? I am interested in your solution and how you got it to work, that you can call "aimage.setObject3D(....)". How you integrated the Aframe Typings in Angular 9?

I think you both might want to try using the package @type/aframe...

Check this link https://developer.aliyun.com/mirror/npm/package/@types/aframe

You can implement using the example here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/aframe/test/aframe-tests.ts

If you want to access AFrame DOM, do so in the ngOnInIt function

If that isn't your problem, you could check out this answer on Stackoverflow https://stackoverflow.com/a/62654149/4230014