External JavaScript Not Working properly in Angular 5

Hi i want to help in Angular 5. I am using external java scripts files without using node modules for Owl.Carousel. but the Owl.Carousel are not working. In angular-cli.json i have link my js files like this

"scripts": [

        "././assets/js/jquery-2.2.4.min.js",
        "././assets/js/Owl.Carousel.js",
        "././assets/js/slick.min.js",
        "././assets/js/active.js"
      ],

"scripts": [

        "././assets/js/jquery-2.2.4.min.js",
        "././assets/js/Owl.Carousel.js",
        "././assets/js/slick.min.js",
        "././assets/js/active.js"
      ],

I have also try to embed the js file in index.html like this

<body>
	<app-root></app-root>
	
    <script src="././assets/js/jquery-2.2.4.min.js"></script>
   
    <script src="././assets/js/Owl.Carousel.js"></script>
    
    <script src="././assets/js/slick.min.js"></script>
  
    <script src="././assets/js/active.js"></script>
</body>
</html>

But both of these way doesn't work and Owl.Carousel not working. And also i don't have to show any error in my console. My project structure is like this

Share Improve this question edited Feb 28, 2018 at 11:11 Kaustubh Khare 3,5103 gold badges38 silver badges50 bronze badges asked Feb 28, 2018 at 7:26 Sam Malik 411 silver badge9 bronze badges

Try assets/js/jquery-2.2.4.min.js and another links in angular-cli.json – Abbas Amiri Commented Feb 28, 2018 at 9:15

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

Angular team advise don't to use jQuery with Angular. jQuery was originally designed as a DOM manipulation library and Angular Team say this is a practice not remended.

I usually use a Bootstrap Directive for Carrousel:

https://ng-bootstrap.github.io/#/ponents/carousel/examples.

It's simple to use and you archieve awesomes results:

 <ngb-carousel>
  <ng-template ngbSlide>
    <img src="https://lorempixel./900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel./900/500?r=2" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel./900/500?r=3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent modo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

As Angular team discourage developers to use javascript in your application. You can use it if you found no other solution than And your file path should be like this

<script src="assets/js/jquery-2.2.4.min.js"></script>
<script src="assets/js/Owl.Carousel.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/active.js"></script>

You can add external JS and CSS to the assets folder and link them in the .angular-cli.json as below:

assets/js/my-js-file.js

If your files are linked properly then you'll have to initialize the carousel in the AfterViewInit lifecycle hook.

Working example:

https://stackblitz./edit/owl-carousel-example

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

External JavaScript Not Working properly in Angular 5 - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)