Блог

У меня есть приложение angular 7, в котором у меня есть директива для создания всплывающих подсказок с использованием tippy.js 4.0.2. Это отлично работает в локальном режиме (ng serve). Однако, как только я попытаюсь интегрировать его в страницу, запущенную на моем сервере, которая имеет tippy.js 2.6.0 в качестве глобальной переменной при наведении курсора мыши на элемент, который имеет всплывающую подсказку, возникает следующая ошибка:

Ошибка типа: i не определен tippy.all.min.js:1:23177

Почему две версии tippy создают помехи и как я могу исправить ошибку?

Моя директива tippy содержит следующие важные части:

 import {
    Instance as TippyInstance,
    Props as TippyOptions,
    default as tippy,
} from 'tippy.js';

/** fake component needed to be able to include tippy theme styles */
@Component({
    selector: "[tooltip]",
    template: `<ng-content></ng-content>`,
    styleUrls: [
        '../../../node_modules/tippy.js/themes/light.css',
    ],
    encapsulation: ViewEncapsulation.None
})
@Directive({
    /* tslint:disable-next-line */
    selector: '[tooltip]',
})
  

и для динамического обновления параметров, которые я использую

 if (!this.tippyInstance) this.tippyInstance = tippy(this.el.nativeElement, this.tippyOptions || undefined) as TippyInstance;
else this.tippyInstance.set(this.tippyOptions);
  

Я не смог решить проблему, однако понижение версии tippy.js версия v2.6.0 в моем проекте angular привела к исчезновению ошибки, как и ожидалось.