将外部文件 js 添加到 Angular 9 项目中

Question

I tried to add script.js to angular.json and use it in one component. That's not working. Those who suggest to add script tag to my html file thats not a good idea. Can someone suggest another idea or what I missed to make my script work?

I add my js file called script.js on angular.json

 "scripts": [
          "src/assets/js/script.js"
        ]

And I declare a variable in slider.ts

  declare const owlCarousel: any;
  ngOnInit() {
    owlCarousel();
  }

script.js

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    dots:false,
    nav:true,
    mouseDrag:false,
    autoplay:true,
    animateOut: 'slideOutUp',
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
    });
        

Answer 1

Try this

First add function in your script.js

export function owlCarousel() {
    $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    dots:false,
    nav:true,
    mouseDrag:false,
    autoplay:true,
    animateOut: 'slideOutUp',
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
    });
}

And in your component add this line to import function owlCarousel

 import {owlCarousel} from '../../assets/js/script.js' /plz add correct path 

Notice that slider.ts is not mandatory

Hope useful.