Angular项目引入owl.carousel报错：owlCarousel不存在于jQuery类型

Hey there! Let's work through this issue step by step to get your Owl Carousel up and running in your Angular project:

1. Fix the Core Setup (CSS & Scripts) #

First off, you missed a critical step: adding Owl Carousel's CSS files. Owl relies on its styles to render properly, so add these lines to your index.html (adjust the path if your node_modules structure differs slightly):

<link rel="stylesheet" href="../node_modules/owlCarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="../node_modules/owlCarousel/dist/assets/owl.theme.default.min.css">

Also, in angular-cli.json, you don't need to include both the minified and non-minified owl.carousel.js files – pick one (the minified version is better for production). And make sure jQuery loads before Owl, since Owl depends on it:

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

2. Fix Your Component Code Issues #

Your menu.component.ts has a couple of small but impactful problems:

• Wrong selector: $("owl-carousel") targets HTML tags named <owl-carousel>, but you almost certainly have an element with a class like owl-carousel (e.g., <div class="owl-carousel">). Use the correct selector: $(".owl-carousel")
• No need for $(document).ready(): In Angular, ngOnInit() runs after the component's template is rendered, so the DOM is already ready – you can remove that wrapper entirely.
• TypeScript type safety: Instead of using declare var $: any, you can install proper type definitions for better TypeScript support:

  npm install @types/jquery --save-dev
  npm install @types/owlcarousel --save-dev
  

  Then you can import jQuery properly instead of using the declare statement:

  import * as $ from 'jquery';
  

Here's the corrected menu.component.ts code:

import { Component, OnInit } from '@angular/core'; 
import * as $ from 'jquery'; 

@Component({ 
  selector: 'app-menu', 
  templateUrl: './menu.component.html', 
  styleUrls: ['./menu.component.scss'] 
}) 
export class MenuComponent implements OnInit { 
  constructor() { } 
  ngOnInit() { 
    // Initialize Owl Carousel with your desired options (matching the demo)
    $(".owl-carousel").owlCarousel({
      mouseWheel: true,
      items: 3,
      loop: true,
      margin: 10,
      nav: true
    }); 

    $('#myDropdown').on('hide.bs.dropdown', function () { 
      return false; 
    }); 
  } 
  closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
  } 
}

3. Do You Need to Export from a Shared Folder? #

Nope, you don't need to export anything from a shared index.ts for Owl Carousel. As long as the scripts are loaded correctly in angular-cli.json and the CSS is included, Owl will be available globally (or via TypeScript types if you installed them).

Final Template Check #

Make sure your menu.component.html has the proper Owl Carousel structure, like:

<div class="owl-carousel">
  <div> Slide 1 Content </div>
  <div> Slide 2 Content </div>
  <div> Slide 3 Content </div>
  <div> Slide 4 Content </div>
</div>

That should resolve the type error and get your carousel working just like the demo you referenced!

内容的提问来源于stack exchange，提问作者Break