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>

Answer 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