Angular 4中外部jQuery文件无法正常工作的技术求助

Hey there, let's get that Owl Carousel working in your Angular 4 app—this is a super common gotcha when mixing jQuery plugins with Angular, so I'll walk you through the fix step by step:

First, make sure you have all the required packages installed. Open your terminal and run these commands:

npm install jquery --save
npm install owl.carousel --save
npm install @types/jquery --save-dev  # Adds TypeScript type support for jQuery
npm install @types/owl.carousel --save-dev  # Optional but gives better code hints

Angular 4 uses angular-cli.json to manage global assets. Open this file and update the scripts and styles arrays to include jQuery and Owl Carousel files:

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/owl.carousel/dist/owl.carousel.min.js"
],
"styles": [
  "../node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
  "../node_modules/owl.carousel/dist/assets/owl.theme.default.min.css",
  // Keep your existing global styles here
]

Note: Adjust the file paths if your node_modules folder isn't one level above the angular-cli.json file.

Angular doesn't render the DOM immediately when the component loads, so initializing the carousel in ngOnInit won't work—you need to wait until the view is fully loaded. Update your app.component.ts like this:

import { Component, AfterViewInit } from '@angular/core';

// Declare jQuery to avoid TypeScript errors
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // Now we can safely initialize Owl Carousel
    $('.testimonials_slider').owlCarousel({
      loop: true,
      margin: 15,
      nav: true,
      responsive: {
        0: { items: 1 },
        768: { items: 2 },
        1200: { items: 3 }
      }
    });
  }
}

Your existing HTML looks correct, but just confirm it matches Owl Carousel's required structure (each slide needs to be wrapped in an .item div):

<!--================Testimonials Area =================-->
<section class="testimonials_area p_100">
  <div class="container">
    <div class="testimonials_slider owl-carousel">
      <div class="item">
        <div class="media">
          <img class="d-flex rounded-circle" src="assets/img/testimonials-1.png" alt="Testimonial author">
          <div class="media-body">
            <img src="assets/img/dotted-icon.png" alt="Quote icon">
            <p>I wanted to mention that th...</p>
          </div>
        </div>
      </div>
      <!-- Add more .item blocks for additional testimonials -->
    </div>
  </div>
</section>

• Console Errors: Open your browser's dev tools (F12) and check the Console tab—if you see "jQuery is not defined" or "Owl Carousel is not a function", double-check your angular-cli.json paths.
• Styles Not Applying: If the carousel looks broken, try disabling view encapsulation for your component (add encapsulation: ViewEncapsulation.None to the @Component decorator) or ensure the Owl Carousel styles are loaded before your component styles.
• DOM Element Not Found: Make sure the .testimonials_slider selector matches exactly—typos here will prevent the carousel from initializing.

That should get your testimonials slider up and running smoothly!

内容的提问来源于stack exchange，提问作者N.S