Upon setting up a new Angular application and integrating three along with @types/three, I proceeded to create a basic component. However, upon executing ng build --prod, the following errors are displayed:
ERROR in node_modules/three/src/core/BufferAttribute.d.ts:21:6 - error TS1086: An accessor cannot be declared in an ambient context.
21 set needsUpdate( value: boolean );
~~~~~~~~~~~
node_modules/three/src/renderers/webgl/WebGLUtils.d.ts:3:43 - error TS2304: Cannot find name 'WebGL2RenderingContext'.
3 constructor( gl: WebGLRenderingContext | WebGL2RenderingContext, extensions: any, capabilities: any );
~~~~~~~~~~~~~~~~~~~~~~
node_modules/three/src/core/InterleavedBufferAttribute.d.ts:20:6 - error TS1086: An accessor cannot be declared in an ambient context.
20 get count(): number;
~~~~~
node_modules/three/src/core/InterleavedBufferAttribute.d.ts:21:6 - error TS1086: An accessor cannot be declared in an ambient context.
21 get array(): ArrayLike<number>;
~~~~~
node_modules/three/src/renderers/webgl/WebGLAttributes.d.ts:6:43 - error TS2304: Cannot find name 'WebGL2RenderingContext'.
6 constructor( gl: WebGLRenderingContext | WebGL2RenderingContext );
Even after including three in the Typescript types array as an attempt to resolve the issue:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["three"]
},
"files": ["src/main.ts", "src/polyfills.ts"],
"include": ["src/**/*.ts"],
"exclude": ["src/test.ts", "src/**/*.spec.ts"]
}