Атрибуты, установленные для хост-элемента Angular 5 Component, не действуют в jsPlumb

Я работаю над своей первой программой Angular> 2 и строю ее с нуля. Я пытаюсь использовать диаграммы потоков в моем приложении, используя jsPlumb. Я застрял в проблеме, когда, когда я устанавливаю элемент узла компонента как источник и назначение моих соединений jsPlumb, соединитель не получает визуализацию (соответствующий svg не создается).

Следующий мой код - я вызываю REST с возвратом массива элементов. Я передаю эти элементы на мой "холст", как это (addNodeToCanvas вызывается в цикле) -

addNodeToCanvas(card) {
    const factory = this.ComponentFactoryResolver.resolveComponentFactory(CardComponent);
    const ref = this.cardDontainer.createComponent(factory);
    ref.location.nativeElement.id = card.uuid; 
    ref.instance.cardData = card;
} 

Обратите внимание, что в строке 4 я устанавливаю уникальный идентификатор объекта как идентификатор элемента DOM, на который можно ссылаться jsPlumb для создания соединений. Когда я запускаю приложение, я вижу список предоставленных DOM, подобных приведенным ниже:

<card _nghost-c4="" id="6c7e7bd4-200f-4b8b-8492-a59fb8809819" class="ng-star-inserted">
    <div _ngcontent-c4="" class="item">
        Hi! I'm a node. My name is Dest 1.
    </div>
</card>

Когда элементы добавлены в DOM, я создаю соединение,

for (let c in cards) {
    this.jsPlumbInstance.draggable(cards[c].uuid);
}
for(let e in edges) {
    this.jsPlumbInstance.connect({
        source: edges[e].source,
        target: edges[e].destination,
    }, routeConnectionSettings);
}

Теперь проблема, с которой я столкнулся, заключается в том, что когда jsPlumb ищет карту элемента # 6c7e7bd4-200f-4b8b-8492-a59fb8809819 (например), ее не удается найти этот элемент в дереве DOM и не создавать соединения.

Пара этого я заметил. Когда вы устанавливаете идентификатор в div вместо селектора компонентов, все работает отлично, и диаграмма создается без каких-либо проблем. Точно так же, когда я устанавливаю стиль для селектора компонентов в файле CSS, стили также не вступают в силу.

Это потому, что селектора компонентов в какой-то мере приглушены, что к ним нельзя получить доступ? Любая помощь приветствуется.

Это мой JSON для ref -

"edges": [
    {
        "uuid": "dcc1151f-4668-4b3a-bbce-bc473545fcd7",
        "source": "770a7359-d8cf-4803-9901-0383a8d080f2",
        "destination": "6c7e7bd4-200f-4b8b-8492-a59fb8809819"
    }
],
"cards": [
    {
        "uuid": "6c7e7bd4-200f-4b8b-8492-a59fb8809819",
        "name": "Dest 1",
        "type": "DESTINATION"
    },
    {
        "uuid": "770a7359-d8cf-4803-9901-0383a8d080f2",
        "name": "Src 1",
        "type": "SOURCE"
    }
]