External JavaScript Not Working properly in Angular 5

Question

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"
      ],

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

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

Jose A. Matarán · Accepted Answer · 2018-02-28 07:39:21Z

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 recommended.

I usually use a Bootstrap Directive for Carrousel:

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

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

 <ngb-carousel>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/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.com/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.com/900/500?r=3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

Hasnain Bukhari · Accepted Answer · 2018-02-28 12:03:03Z

1

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>

answered Feb 28, 2018 at 12:03

Hasnain Bukhari

4682 gold badges6 silver badges23 bronze badges

Comments

Niral Munjariya · Accepted Answer · 2018-03-01 10:25:37Z

1

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.com/edit/owl-carousel-example

edited Mar 1, 2018 at 10:25

answered Feb 28, 2018 at 11:36

Niral Munjariya

1,39113 silver badges27 bronze badges

3 Comments

Sam Malik Over a year ago

i have also link my files in angular-cli.json but not working..then i have put my files in index.html before </body> tag

Niral Munjariya Over a year ago

Have you checked in the Network section in the Developer Tools, that are those files loaded successfully or not?

Niral Munjariya Over a year ago

@SamMalik: Please check the updated answer with working example.

Collectives™ on Stack Overflow

External JavaScript Not Working properly in Angular 5

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related