为了账号安全,请及时绑定邮箱和手机立即绑定

手动解决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’

解决WebGL2RenderingContextOffscreenCanvas问题

  • 需要在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"]
}

到这里,项目终于可以编译通过了,暂时还没发现其他的问题. 不过这个算是临时解决吧,这叫掩耳盗铃?如果依然有问题,那很可能就需要把typescript的版本降下来。始终要通过将各个库升级到对应的版本才行.

···········
欢迎关注课程:
Go实战仿百度云盘 实现企业级分布式云存储系统

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
240
获赞与收藏
202

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消