Add external file js to an Angular 9 project

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
        }
    }
    });

Does this address your requirements?

Kamran Khatti
– Kamran Khatti

2020-08-17 20:37:50 +00:00
Commented Aug 17, 2020 at 20:37 — Kamran Khatti
– Kamran Khatti, Commented Aug 17, 2020 at 20:37
I already try this method doesn't work

Kindth
– Kindth

2020-08-17 21:40:42 +00:00
Commented Aug 17, 2020 at 21:40 — Kindth
– Kindth, Commented Aug 17, 2020 at 21:40

A.khalifa · Accepted Answer · 2020-08-17 20:41:16Z

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.

answered Aug 17, 2020 at 20:41

A.khalifa

2,5063 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kindth Over a year ago

Why the slider.ts is not mandatory !! I tried to make the script as a function to call it but still doesn't work

Kindth Over a year ago

yeah I did & I tried sample test window.alert('hello!') but js not working I don't know why

Collectives™ on Stack Overflow

Add external file js to an Angular 9 project

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related