最近开发需求用到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，目的已经达到，笔记一下！