Model-viewer: Type Definition Error in Angular

[biohuns]

Hello,
I'm trying to model-viewer to my Angular project. I try

npm install ---save @google/model-viewer

and add this code to component.

import '@google/model-viewer';

Then, I run my project, this error has occurred.

ERROR in node_modules/@google/model-viewer/lib/model-viewer-base.d.ts:1:23 - error TS2688: Cannot find type definition file for 'resize-observer-browser'.

1 /// <reference types="resize-observer-browser" />
                        ~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/model-viewer-base.d.ts:57:34 - error TS2304: Cannot find name 'ResizeObserver'.

57     protected [$resizeObserver]: ResizeObserver | null;
                                    ~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:207:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

207     private [$isStationary];
                ~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:207:14 - error TS2304: Cannot find name '$isStationary'.

207     private [$isStationary];
                 ~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:208:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

208     private [$moveCamera];
                ~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:208:14 - error TS2304: Cannot find name '$moveCamera'.

208     private [$moveCamera];
                 ~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:3m210:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

210     private [$userAdjustOrbit];
                ~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:210:14 - error TS2304: Cannot find name '$userAdjustOrbit'.

210     private [$userAdjustOrbit];
                 ~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:211:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

211     private [$wrapAngle];
                ~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:211:14 - error TS2304: Cannot find name '$wrapAngle'.

211     private [$wrapAngle];
                 ~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:212:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

212     private [$pixelLengthToSphericalAngle];
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:212:14 - error TS2304: Cannot find name '$pixelLengthToSphericalAngle'.

212     private [$pixelLengthToSphericalAngle];
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:93m213:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

213     private [$twoTouchDistance];
                ~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:213:14 - error TS2304: Cannot find name '$twoTouchDistance'.

213     private [$twoTouchDistance];
                 ~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:214:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

214     private [$handlePointerMove];
                ~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:214:14 - error TS2304: Cannot find name '$handlePointerMove'.

214     private [$handlePointerMove];
                 ~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:215:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

215     private [$handleSinglePointerMove];
                ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:215:14 - error TS2304: Cannot find name '$handleSinglePointerMove'.

215     private [$handleSinglePointerMove];
                 ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:216:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

216     private [$handlePointerDown];
                ~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:216:14 - error TS2304: Cannot find name '$handlePointerDown'.

216     private [$handlePointerDown];
                 ~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:217:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

217     private [$handleSinglePointerDown];
                ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:217:14 - error TS2304: Cannot find name '$handleSinglePointerDown'.

217     private [$handleSinglePointerDown];
                 ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:218:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

218     private [$handlePointerUp];
                ~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:218:14 - error TS2304: Cannot find name '$handlePointerUp'.

218     private [$handlePointerUp];
                 ~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:219:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

219     private [$handleWheel];
                ~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:219:14 - error TS2304: Cannot find name '$handleWheel'.

219     private [$handleWheel];
                 ~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:220:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

220     private [$handleKey];
                ~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/SmoothControls.d.ts:220:14 - error TS2304: Cannot find name '$handleKey'.

220     private [$handleKey];
                 ~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/TextureUtils.d.ts:27:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

27     private [$addMetadata];
               ~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/TextureUtils.d.ts:27:14 - error TS2304: Cannot find name '$addMetadata'.

27     private [$addMetadata];
                ~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/TextureUtils.d.ts:32:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

32     private [$loadEnvironmentMapFromUrl];
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/TextureUtils.d.ts:32:14 - error TS2304: Cannot find name '$loadEnvironmentMapFromUrl'.

32     private [$loadEnvironmentMapFromUrl];
                ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/TextureUtils.d.ts:36:13 - error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.

36     private [$loadGeneratedEnvironmentMap];
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@google/model-viewer/lib/three-components/TextureUtils.d.ts:36:14 - error TS2304: Cannot find name '$loadGeneratedEnvironmentMap'.

36     private [$loadGeneratedEnvironmentMap];

The ResizeObserver error was resolved by npm install -D @types/resize-observer-browser, but other errors could not be resolved.
I can't determine if this is a model viewer error.

PS. I am very grateful for this project.I didn't have knowledge arround 3D, but this was easy to use.

Versions

model-viewer: v0.7.2
Angular: 8.2.12
TypeScript: 3.5.3

[cdata]

Hey @biohuns thanks for reporting. To be honest, I had run into similar problems recently. I think we may not be distributing the full set of type declarations needed in order to incorporate our package into a TypeScript project.