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
3 answers
solution1
1 2018-02-28 07:39:21
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>
solution2
1 2018-02-28 11:36:30
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:
solution3
0 2018-02-28 12:03:03
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.