最近开发需求用到antv的x6图表展示内容，所以就把其导入工程，这里遇到一些集成问题，下面总结一下，涉及了angular8和angular11这两个版本的分析。
Angular8
比较早的版本了,花了一些时间搞定，首先配置tsconfig.json
"skipLibCheck": true
在这里加上这样的配置，因为antv/x6里面有对jquery的依赖，但是在8版本中的angular.json没有找到对应的配置项
接下来在组件引用：
import { Graph, Shape } from '@antv/x6'
@Input() graph?: Graph
//创建画布
this.graph = new Graph({ container: el, grid: true })
//创建节点
const rect = new Shape.Rect({
id: 'node1',
x: 40,
y: 40,
width: 100,
height: 40,
label: 'rect',
zIndex: 2
})
const circle = new Shape.Circle({
id: 'node2',
x: 280,
y: 200,
width: 60,
height: 60,
label: 'circle',
zIndex: 2,
})
const edge = new Shape.Edge({
id: 'edge1',
source: rect,
target: circle,
zIndex: 1,
})
this.graph.addNode(rect)
this.graph.addNode(circle)
this.graph.addEdge(edge)
展示出来了，并且打包也没问题
Angular11
这个版本比较新，当然整合antv/x6也需要做点工作
第一步：下载依赖包
yarn add @types/jquery -D
yarn add @types/jquery-mousewheel -D
yarn add @types/lodash-es -D
yarn add @types/mousetrap -D
第二步：配置angular.json
"architect":{
"build":{
"allowedCommonJsDependencies": [
"jquery",
"mousetrap"
]
}
}
如果这步不配置 项目会有警告⚠️
这里有人可能会问，在angular8版本里面怎么不使用angular.json配置？ 当然我在做的过程中也想，但是angular版本太多了，看了一下angular8版本中的源码，angular.json是没有加上allowedCommonJsDependencies的配置项的，所以无法对一些common.js规范的js进行管理
这是从angular11版本中找到的
而在angular8版本是没有这个配置项
总结：能让2个版本正常使用antv/x6，目的已经达到，笔记一下！
