首页手记手动解决Ionic4/Angular8+threejs...

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

标签：

AngularJS Ionic

开发环境说明

当前的前端项目是基于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"]
}