1

I am learning Angular. I am trying to integrate Revolution Slider in Angular 11 WebSite. Script section of my angular.json file is like below.

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "src/assets/js/bootstrap.min.js",
    "src/assets/js/modernizr.custom.js",
    "src/assets/js/gmaps.js",
    "src/assets/js/jquery.themepunch.revolution.min.js",
    "src/assets/js/jquery.themepunch.tools.min.js",
    "src/assets/js/extensions/revolution.extension.actions.min.js",
    "src/assets/js/extensions/revolution.extension.carousel.min.js",
    "src/assets/js/extensions/revolution.extension.kenburn.min.js",
    "src/assets/js/extensions/revolution.extension.migration.min.js",
    "src/assets/js/extensions/revolution.extension.parallax.min.js",
    "src/assets/js/extensions/revolution.extension.slideanims.min.js",
    "src/assets/js/extensions/revolution.extension.layeranimation.min.js",
    "src/assets/js/extensions/revolution.extension.navigation.min.js",
    "src/assets/js/extensions/revolution.extension.video.min.js",
    "src/assets/js/dlmenu.js",
    "src/assets/js/jquery.magnific-popup.js",
    "src/assets/js/mixer.js",
    "src/assets/js/jquery.easing.1.3.js",
    "src/assets/js/owl.carousel.js",
    "src/assets/js/slick.js",
    "src/assets/js/jquery.appear.js",
    "src/assets/js/theme.js"              
]

I installed jQuery using below code.

npm install jquery --save

My component is like below

rev-slider.component.ts

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


@Component({
  selector: 'app-rev-slider',
  templateUrl: './rev-slider.component.html',
  styleUrls: ['./rev-slider.component.css'
    ]
})
  

export class RevSliderComponent implements AfterViewInit {

    constructor(private element: ElementRef) {}

    ngAfterViewInit(): void {

        ($(this.element.nativeElement) as any).show().revolution({
            //more text here
        });
    }
}

I added this component in parent component like below

<app-rev-slider></app-rev-slider>

I am getting below error in console.

ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_0__(...).show().revolution is not a function

enter image description here

abu abu
  • 4,662
  • 6
  • 48
  • 93
  • 2
    What is your code supposed to do? You don't need any JQuery to show or hide an Angular component, if this is your intention. – Lynx 242 May 22 '21 at 12:53
  • @Lynx242 Thanks for your reply. I am trying to integrate Revolution slider. – abu abu May 22 '21 at 13:18

1 Answers1

1

Try changing

import * as $ from 'jquery';

to

declare var $;
C. Peck
  • 2,176
  • 1
  • 12
  • 31
Niaina Fredson Dorel Ratsima
  • 11
  • 1