导入控制器后，三个JS + Angular 7出现错误BufferAttribute package.json看起来像这样。 tsconfig.app.json看起来像这样。

2024-05-17 • 问答

我正在使用Angular 7，并且想向项目添加Three JS。但是将错误导入到组件控制器后出现错误。我确实安装了npm install three --save及其类型npm install @type/webgl2。它显示了我的终端VS代码中的错误，并且代码也不起作用。我不太确定自己做对了，但是我导入的是import * as THREE from 'three';。我一直在跟踪Stackblitz上的一个document，但它仍然有效，但仍然显示错误消息，使我无法构建项目。有什么办法摆脱这些错误？这是我的错误：

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.

只需使用

“三个”：“ ^ 0.110.0”

安装此 devDependencies

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

更新您的 tsconfig.app.json

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

`package.json`看起来像这样。

{
  "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`看起来像这样。

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

对于 Angular 8 ，我们可以正如Omar Arturo所说，我们可以将三个js 降级到 0.110.0 ，但不能立即使用

npm install @types/webgl2

和 tsconfig.app.json

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

应该这样做。

像这样的问题在最新的Three r115中得到了解决。开箱即用。

您必须做两件事。另外，请确保已安装以下模块，

步骤01： 安装devDependencies

npm install --save-dev @types/offscreencanvas

然后更新 tsconfig.app.json

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

步骤02： 转到tsconfig.json文件，并在“ compilerOptions” 对象中添加 skipLibCheck：true 。例如：

"compilerOptions": {
    ...
    ...
    "skipLibCheck": true,},

更多信息：由于打字稿版本问题，发生此错误。因此，您可以通过跳过lib检查来解决此问题。实际上，其他一些人面临该WebGL问题。因此，如果您使用Three.js，那么这些解决方案将解决您的问题。

导入控制器后，三个JS + Angular 7出现错误BufferAttribute package.json看起来像这样。 tsconfig.app.json看起来像这样。

freepear 回答：导入控制器后，三个JS + Angular 7出现错误BufferAttribute package.json看起来像这样。 tsconfig.app.json看起来像这样。

package.json看起来像这样。

tsconfig.app.json看起来像这样。

大家都在问

`package.json`看起来像这样。

`tsconfig.app.json`看起来像这样。