? ? ? 最近開(kāi)發(fā)需求用到antv的x6圖表展示內(nèi)容，所以就把其導(dǎo)入工程，這里遇到一些集成問(wèn)題，下面總結(jié)一下，涉及了angular8和angular11這兩個(gè)版本的分析。
Angular8
比較早的版本了,花了一些時(shí)間搞定，首先配置tsconfig.json
"skipLibCheck": true
在這里加上這樣的配置，因?yàn)閍ntv/x6里面有對(duì)jquery的依賴，但是在8版本中的angular.json沒(méi)有找到對(duì)應(yīng)的配置項(xiàng)
接下來(lái)在組件引用：
import { Graph, Shape } from '@antv/x6'
@Input() graph?: Graph
//創(chuàng)建畫布
this.graph = new Graph({ container: el, grid: true })
//創(chuàng)建節(jié)點(diǎn)
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)
展示出來(lái)了，并且打包也沒(méi)問(wèn)題
Angular11
這個(gè)版本比較新，當(dāng)然整合antv/x6也需要做點(diǎn)工作
第一步：下載依賴包
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"
? ? ? ?]
? ? ? ?}
}
如果這步不配置 項(xiàng)目會(huì)有警告??
這里有人可能會(huì)問(wèn)，在angular8版本里面怎么不使用angular.json配置？ 當(dāng)然我在做的過(guò)程中也想，但是angular版本太多了，看了一下angular8版本中的源碼，angular.json是沒(méi)有加上allowedCommonJsDependencies的配置項(xiàng)的，所以無(wú)法對(duì)一些common.js規(guī)范的js進(jìn)行管理
這是從angular11版本中找到的
而在angular8版本是沒(méi)有這個(gè)配置項(xiàng)
總結(jié)：能讓2個(gè)版本正常使用antv/x6，目的已經(jīng)達(dá)到，筆記一下！
