? ? ? 最近開發(fā)需求用到antv的x6圖表展示內(nèi)容，所以就把其導(dǎo)入工程桥温，這里遇到一些集成問題楞捂，下面總結(jié)一下，涉及了angular8和angular11這兩個版本的分析兄渺。
Angular8
比較早的版本了,花了一些時間搞定缝龄，首先配置tsconfig.json
"skipLibCheck": true
在這里加上這樣的配置，因為antv/x6里面有對jquery的依賴挂谍，但是在8版本中的angular.json沒有找到對應(yīng)的配置項
接下來在組件引用：
import { Graph, Shape } from '@antv/x6'
@Input() graph?: Graph
//創(chuàng)建畫布
this.graph = new Graph({ container: el, grid: true })
//創(chuàng)建節(jié)點
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
這個版本比較新，當(dāng)然整合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配置炼绘？ 當(dāng)然我在做的過程中也想，但是angular版本太多了妄田，看了一下angular8版本中的源碼俺亮，angular.json是沒有加上allowedCommonJsDependencies的配置項的，所以無法對一些common.js規(guī)范的js進行管理
這是從angular11版本中找到的
而在angular8版本是沒有這個配置項
總結(jié)：能讓2個版本正常使用antv/x6形庭，目的已經(jīng)達到铅辞，筆記一下！
