Настроить Revolution Slider в компоненте Angular

Я использую шаблон, приобретенный в Theme forest, в качестве основы для углового приложения.

Я хочу превратить эти части шаблона в компоненты.

Пытаюсь заставить слайдер Revolution работать.

В шаблоне html - подключает ползунок к событию готовности документа:

    <script>
  jQuery(document).ready(function() {

    jQuery("#rev_slider_280_1").show().revolution({
      sliderType: "hero",
      jsFileLocation: "revo-slider/js/",
      sliderLayout: "fullscreen",
      dottedOverlay: "none",
      delay: 9000,
      /*navigation: {},*/
      responsiveLevels: [1240, 1024, 778, 480],
      visibilityLevels: [1240, 1024, 778, 480],
      gridwidth: [1240, 1024, 778, 480],
      gridheight: [868, 768, 960, 720],
      lazyType: "none",
      parallax: {
        type: "off",
        origo: "slidercenter",
        speed: 1000,
        levels: [0],
        type: "scroll",
        disable_onmobile: "on"
      },
      shadow: 0,
      spinner: "spinner2",
      autoHeight: "off",
      fullScreenAutoWidth: "off",
      fullScreenAlignForce: "off",
      fullScreenOffsetContainer: "",
      fullScreenOffset: "",
      disableProgressBar: "on",
      hideThumbsOnMobile: "off",
      hideSliderAtLimit: 0,
      hideCaptionAtLimit: 0,
      hideAllCaptionAtLilmit: 0,
      debugMode: false,
      fallbacks: {
        simplifyAll: "off",
        disableFocusListener: false,
      }
    });

  }); /*ready*/
</script>

следуя аналогичному подходу в Angular, будет использоваться ловушка жизненного цикла OnInit.

Я сослался на jQuery и захватил элемент DOM.

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

Я получаю ошибку времени компиляции с этим кодом (свойство Revolution не существует в JQuery:

import {Component, ElementRef, OnInit} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'pm-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'pm';

  constructor(private element: ElementRef) {}

  ngOnInit(): void {

$(this.element.nativeElement).show().revolution({
  sliderType: "hero",
  jsFileLocation: "revo-slider/js/",
  sliderLayout: "fullscreen",
  dottedOverlay: "none",
  delay: 9000,
  /*navigation: {},*/
  responsiveLevels: [1240, 1024, 778, 480],
  visibilityLevels: [1240, 1024, 778, 480],
  gridwidth: [1240, 1024, 778, 480],
  gridheight: [868, 768, 960, 720],
  lazyType: "none",
  parallax: {
    type: "off",
    origo: "slidercenter",
    speed: 1000,
    levels: [0],
    type: "scroll",
    disable_onmobile: "on"
  },
  shadow: 0,
  spinner: "spinner2",
  autoHeight: "off",
  fullScreenAutoWidth: "off",
  fullScreenAlignForce: "off",
  fullScreenOffsetContainer: "",
  fullScreenOffset: "",
  disableProgressBar: "on",
  hideThumbsOnMobile: "off",
  hideSliderAtLimit: 0,
  hideCaptionAtLimit: 0,
  hideAllCaptionAtLilmit: 0,
  debugMode: false,
  fallbacks: {
    simplifyAll: "off",
    disableFocusListener: false,
      }
    });
  }
}