添加 Three.js 后 Angular 构建失败答案

【问题标题】：Angular Build Fails After Adding Three.js添加 Three.js 后 Angular 构建失败
【发布时间】：2020-01-26 17:30:45
【问题描述】：

我创建了一个全新的 Angular 应用程序并添加了 three 和 @types/three 并创建了一个基本组件。但是当我运行ng build --prod 时，我得到了这些错误：

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 );

将 three 添加到 Typescript 类型数组没有帮助：

{
  "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"]
}

【问题讨论】：

标签： angular typescript three.js angular8

【解决方案1】：

three.js 依赖于 TypeScript 3.7。从@angular/cli@9.0.0-rc.10 和@angular/core@9.0.0-rc.9 开始，您也应该能够将TypeScript 3.7 与Angular 一起使用。 Angular 存储库中有关此的更多详细信息：

https://github.com/angular/angular-cli/issues/16071#issuecomment-577109414

three.js R112

【讨论】：