解决Ionic4/Angular8+threejs(r111)的兼容性问题

开发环境说明

当前的前端项目是基于Ionic4进行开发的,底层基于Angular8框架. 项目中使用到了threejs库,之前版本用的是r0.108.0, 最近做了个版本升级,升级到了r0.111.0, 结果在编译的时候报了如下几种错误.

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 );
// ...
ERROR in node_modules/three/src/renderers/WebGLRenderer.d.ts(35,31): error TS2304: Cannot find name 'OffscreenCanvas'.
node_modules/three/src/renderers/webgl/WebGLUtils.d.ts(3,43): error TS2304: Cannot find name 'WebGL2RenderingContext'.

可以见到主要出现了三种错误:

• An accessor cannot be declared in an ambient context
• Cannot find name 'OffscreenCanvas’
• Cannot find name 'WebGL2RenderingContext’

解决WebGL2RenderingContext及OffscreenCanvas问题

• 需要在tsconfig.app.ts的types字段增加如下声明:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["webgl2", "offscreencanvas"] // 这里加
  },
// ...
  "exclude": ["test.ts", "**/*.spec.ts"]
}

• 手动安装对应的包

npm i @types/offscreencanvas --save
npm i @types/webgl2 --save
# 当前默认下会安装如下版本
# "@types/offscreencanvas": "^2019.6.0",
# "@types/webgl2": "0.0.5",

解决An accessor cannot be declared in an ambient context问题

• 原因分析

这是由于已安装的typescript版本和three库所需的typescript版本不一致导致的,已安装的typescript比较旧, 当前为3.5.3.

• 尝试升级typescript

npm uninstall typescript
npm i typescript
# 默认重新安装了3.7.3版本

重新构建的时候发现原有问题不报错了, 但是出现了新的问题:

ionic build --prod --release
// ...
Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.7.3 was found instead

说明目前Angular8最新支持的typescript版本要低于3.6? 一开始我就尝试把Angular8升级到刚发布不久的Angular9, 后来发现Ionic4还不支持Angular9, 这就有点尴尬了. IonicFramework 5正式版估计很快就发布了,但是也没看到对于这方面有什么具体说法.
所以暂时用了个临时的方法先解决这个问题, 就是粗暴的先禁用项目对typescript版本的检查,在tsconfig.app.ts中新增的具体配置如下:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["webgl2", "offscreencanvas"]
  },
  "angularCompilerOptions": {
    // ...
    "disableTypeScriptVersionCheck": true  // 在这里新加了一个配置选项
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

到这里,项目终于可以编译通过了,暂时还没发现其他的问题. 不过这个算是临时解决吧,这叫掩耳盗铃?始终要通过将各个库升级到对应的版本才行.