Three JS + Angular 7 getting error BufferAttribute after imported to controller

Question

I am using Angular 7 and I want to add Three JS to my project. But I'm getting an error after I imported it to my component controller. I did install npm install three --save and their type npm install @type/webgl2. It shows error in my terminal VS code and code doesn't work either. I not quite sure that I am made it correctly, but what I import is import * as THREE from 'three';. I've been following one document on Stackblitz and it working but still have an error shows that makes me cannot build my project. Any way to get rid of these errors? This is what my error looks like:

ERROR in node_modules/three/src/core/BufferAttribute.d.ts(21,6): error 
TS1086: An accessor cannot be declared in an ambient context.
node_modules/three/src/core/InterleavedBufferAttribute.d.ts(19,6): error 
TS1086: An accessor cannot be declared in an ambient context.
node_modules/three/src/core/InterleavedBufferAttribute.d.ts(20,6): error 
TS1086: An accessor cannot be declared in an ambient context.

Answer 1

Install this devDependencies

npm install --save-dev @types/offscreencanvas
npm install --save-dev @types/webgl2

Update your tsconfig.app.json

 "types": ["node", "webgl2", "offscreencanvas"]

package.json looks like this.

{
  "name": "sketch",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.4.0",
    "subsink": "^1.0.0",
    "three": "^0.110.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.20",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "@types/offscreencanvas": "^2019.6.0",
    "@types/webgl2": "0.0.5",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

tsconfig.app.json looks like this.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node", "webgl2", "offscreencanvas"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

Answer 2

Simply use the

"three": "^0.110.0"