Angular+G2 导入G2模块报错

问题描述:

在angular中使用G2做可视化展示,按照官网教程:https://g2.antv.vision/zh/docs/manual/about-g2

npm install @antv/g2
import { Chart } from '@antv/g2';

然后就会报错

报错:

ERROR in node_modules/@antv/component/lib/abstract/group-component.d.ts(110,142): error TS2304: Cannot find name ‘Omit’.
node_modules/@antv/data-set/lib/data-set.d.ts(1,8): error TS1192: Module ‘“E:/InspurWorkSpace/Angular/boostgoui/node_modules/wolfy87-eventemitter/EventEmitter”’ has no default export.
node_modules/@antv/data-set/lib/view.d.ts(1,8): error TS1192: Module ‘“E:/InspurWorkSpace/Angular/boostgoui/node_modules/wolfy87-eventemitter/EventEmitter”’ has no default export.
node_modules/@antv/g2/lib/chart/controller/annotation.d.ts(14,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/@antv/g2/lib/chart/controller/base.d.ts(20,18): error TS1086: An accessor cannot be declared in an ambient context.
在这里插入图片描述

解决方法:

在 src/tsconfig.app.json 文件中添加 “skipLibCheck”: true 跳过声明文件的检查即可,是否有副作用尚未可知,求赐教?
在这里插入图片描述
tsconfig.app.json 文件配置项如下:

{
  "compilerOptions": {
    "target": "es5",//编译后的目标
    "lib": [
      "dom", //dom运行环境
      "dom.iterable",//迭代器运行环境
      "esnext"//es6转化成es5的环境
    ],
    "downlevelIteration": true,
    "allowJs": true, //是否允许在ts文件中引入js
    "skipLibCheck": true,//是否跳过声明文件的检查
    "esModuleInterop": true, //可以使用es6的方式导入node.js的方法
    "allowSyntheticDefaultImports": true,
    "strict": true,//所有的语法都会进行严格的检查
    "forceConsistentCasingInFileNames": true,//文件名是否区分大小写
    "module": "esnext",//模块化标准
    "moduleResolution": "node",//按照node的规则去找文件
    "resolveJsonModule": true,//是否允许把json文件当做模块进行解析
    "isolatedModules": true,//每个文件需要是一个模块
    "noEmit": true, //不需要生成文件
    "jsx": "react"
  },
  "include": [
    "src" //处理src目录下的文件
  ]
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Angular是一个流行的JavaScript框架,用于构建Web应用程序。Ionic是基于Angular的开源移动应用开发框架,它提供了一套UI组件和具,帮助开发者构建跨平台的移动应用程序。 Swiper是一个流行的移动端滑动组件库,它提供了丰富的滑动效果和交互功能,可以用于创建漂亮的轮播图、图片浏览器等。 结合Angular和Ionic,你可以轻松地集成Swiper组件到你的移动应用中。首先,你需要在你的Angular项目中安装Swiper组件库。可以使用npm命令来安装: ``` npm install swiper --save``` 安装完成后,你可以在你的Ionic组件中引入Swiper组件,并在模板中使用它。以下是一个简单的示例: ```typescriptimport { Component } from '@angular/core'; import SwiperCore, { Navigation, Pagination } from 'swiper/core'; SwiperCore.use([Navigation, Pagination]); @Component({ selector: 'app-swiper', template: ` <swiper [navigation]="true" [pagination]="true"> <ng-template swiperSlide>Slide1</ng-template> <ng-template swiperSlide>Slide2</ng-template> <ng-template swiperSlide>Slide3</ng-template> </swiper> `, }) export class SwiperComponent {} ``` 在上面的示例中,我们首先引入了Swiper组件库,并注册了所需的Swiper模块(例如Navigation和Pagination)。然后,在组件的模板中,我们使用`<swiper>`标签创建了一个Swiper实例,并在内部添加了三个滑动的内容块。 你可以根据你的需求自定义Swiper的配置和样式。更多关于Swiper的用法和配置,你可以参考Swiper官方文档。 希望这可以帮助到你!如果你还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值