Import external .js / .css into angular4 app

Question

Im trying to use owl.carousel onto my angular app, here's a fiddle of what's the objective.

https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html

The steps i took were:

Downloaded the zip from the owl-carousel website
paste them on ../node_modules/owlCarousel/
didn't need to add the .css and .js files on index.html because its an internal module (which can be found on node_modules)

On angular-cli.json i've added on scripts the path for those .js files

"scripts": [
            "../node_modules/owlCarousel/dist/owl.carousel.js",
            "../node_modules/owlCarousel/dist/owl.carousel.min.js",
....

i what to use the carousel on my menu compontent, the problem is that when i call the funtion on ngInit() menu.compontent.ts:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

it gives an error on owlCarousel(), saying that "owlCarousel does not exist on type 'jQuery'.

am i supose to export something on index.ts that i use to export all compontentes of shared folder? Or i need to import something on menu.component.ts, if so, what?

heres my menu.compontent.ts:

import { Component, OnInit } from '@angular/core';
//import * as $ from "jquery";
declare var $: any;


@Component({
 selector: 'app-menu',
 templateUrl: './menu.component.html',
 styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {

 constructor() {
 }
 ngOnInit() {

  $(document).ready(function(){
      $(".owl-carousel").owlCarousel();
  });

  $('#myDropdown').on('hide.bs.dropdown', function () {
      return false;
  });
}

closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
}

i stop having error, but the carousel doesn't work.. i got a stack of images of the slider. the developer tools output: GET 172.27.192.205:4201/node_modules/owlCarousel/dist/assets/… net::ERR_ABORTED GET 172.27.192.205:4201/node_modules/owlCarousel/dist/… net::ERR_ABORTED core.js:1427 ERROR TypeError: $(...).owlCarousel is not a function — Break
– Break, Commented Jan 29, 2018 at 9:48
It doesn't work that way. You can include CSS in styles[] when it's internal(node_modules or other directory) or by attaching to index.html if it's CDN. — Sergey
– Sergey, Commented Jan 29, 2018 at 14:33
by that time i think its internal because i've installed the owl.carousel "npm install --save owl.carousel" then i included it in styles[] and scripts[] and angular-cli.json.. i have it on index too. the .css and .js do i have to delete it? when it's internal i don't have to include the link and scripts on index.html ? Thank you.. — Break
– Break, Commented Jan 29, 2018 at 15:11
In one place including only. Otherwise, you include it as many times as you imported it. — Sergey
– Sergey, Commented Jan 29, 2018 at 16:04

72GM · Accepted Answer · 2018-01-27 12:55:45Z

1

Firstly don't load both .js/min.js & .css/min.js as you are loading 2 versions of same thing.

Secondly you are not writing typescript and you are polluting your angular with jquery unnecessarily. There is no point using angular in this way. Interacting with the DOM in this way is not recommended

Use a library that is written specifically for angular and follows angular best practices eg. Ng Bootstrap or NGX bootstrap. Otherwise just use html and jquery and your owl library.

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

https://valor-software.com/ngx-bootstrap/#/carousel

answered Jan 27, 2018 at 12:55

72GM

3,1544 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Break Over a year ago

thank you, i tought that i has to import the both os them.. I'm still a little confused about how to import librarys.. the objective is to have a slider to perform like a menu, a set of 8 or 9 clickable buttons, and then slide to another set of buttons with click and drag like the exemple i've gave, i think owl have what i need. but still, i need to understand how to import the librarys the right way, because i think i'm not doing that with the best practices.. thank you once again

andrea06590 · Accepted Answer · 2018-01-28 13:07:04Z

0

The thing is that people starting with Angular projects, don't get that jQuery will cause you problems if not well integrated. That's why people create npm packages integrating those jQuery solution. https://www.npmjs.com/package/angular2-carousel

answered Jan 28, 2018 at 13:07

andrea06590

1,3093 gold badges11 silver badges23 bronze badges

Collectives™ on Stack Overflow

Import external .js / .css into angular4 app

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related