Add script js to an Angular 9 project

Question

I tried to add script.js to angular.json and use it in one component so that's not working for those who can suggest to add script tag to my html file thats not a good idea so can someone please suggest another idea or what is missed to make my script work. Thank you

Here is my script :

$('.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
    }
}
});

file.html:

<header>

  <div class="owl-carousel owl-theme">
      <div class="item">
          <img src="https://cdn.pixabay.com/photo/2017/10/24/10/30/business-2884023_960_720.jpg" alt="images not found">
          <div class="cover">
              <div class="container">
                  <div class="header-content">
                      <div class="line"></div>
                      <h2>Teimagine Digital Experience with</h2>
                      <h1>Start-ups and solutions</h1>
                      <h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4>
                  </div>
              </div>
           </div>
      </div>                    
      <div class="item">
          <img src="https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg" alt="images not found">
          <div class="cover">
              <div class="container">
                  <div class="header-content">
                      <div class="line animated bounceInLeft"></div>
                      <h2>Reimagine Digital Experience with</h2>
                      <h1>Intelligent solutions</h1>
                      <h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4>
                  </div>
              </div>
           </div>
      </div>                
      
</header>

score 1 · Accepted Answer · answered Aug 07 '20 at 14:46

1

Way 1:

Refer the scripts inside the angular-cli.json (angular.json when using angular 6+) file.
```
"scripts": [
    "../path" 
 ];
```
then add in typings.d.ts (create this file in src if it does not already exist)
```
declare var variableName:any;
```
Import it in your file as
```
import * as variable from 'variableName';
```

Reference https://stackoverflow.com/a/44817445/9640128

Way 2:

you can add multiple scripts when your component loads dynamically

Reference : https://stackoverflow.com/a/49981918/9640128

answered Aug 07 '20 at 14:46

Mohammed Ismail

308
1
3
14

1

Thanks for your reply I tried the second method but it's not working I put MyScript.js on assets and add the multiple scripts dynamically function on component.ts but still not working – Kindth Aug 07 '20 at 16:23
1

yeah core.js:6210 ERROR TypeError: $(...).owlCarousel is not a function at owlCarousel (script.js:2) at SliderComponent.loadJs (slider.component.ts:23) – Kindth Aug 18 '20 at 16:54

Add script js to an Angular 9 project

1 Answers1