Bootstrap+Angular报错：$(...).collapse() is not a function 求助

Hey there! Let’s break down why you’re hitting this error and get your navbar collapse working when users click links (since Angular’s routing doesn’t refresh the page).

Why the Error Happens #

That TypeError almost always means Bootstrap’s JavaScript couldn’t find jQuery when it loaded. Bootstrap’s collapse (and other interactive components) depend on jQuery to add the collapse() method to the $ object. If jQuery loads after Bootstrap, or isn’t loaded at all, this method won’t exist.

Step-by-Step Fixes #

1. Make sure dependencies are installed

First, confirm you have jQuery and Bootstrap in your project. Run these commands if you haven’t already:

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

The @types/jquery package lets TypeScript recognize the $ variable without throwing "not defined" errors.

2. Fix the load order in angular.json

Bootstrap needs jQuery to load first. Open your angular.json file, find the scripts array under build > options, and list jQuery before Bootstrap’s JS:

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

This ensures Bootstrap can attach its methods to jQuery correctly.

3. Properly trigger collapse in your component

Instead of raw jQuery in a random event listener, use Angular’s lifecycle hooks to make sure the DOM is ready. Here’s two ways to do it:

Option 1: Using jQuery (simple, but less "Angular-y")

import { Component, AfterViewInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements AfterViewInit {

  ngAfterViewInit() {
    // Bind click event to all nav links
    $('.navbar-nav .nav-link').on('click', () => {
      // Hide the collapsed navbar
      $('.navbar-collapse').collapse('hide');
    });
  }
}

We use ngAfterViewInit because that’s when the DOM elements are fully rendered.

Option 2: Angular-native approach (no jQuery)

If you want to avoid jQuery entirely (more aligned with Angular best practices), use ViewChild to grab the navbar element and call Bootstrap’s native collapse methods:

In your component:

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  @ViewChild('navbarCollapse') navbarCollapse!: ElementRef;

  closeNavbar() {
    // Access Bootstrap's Collapse instance attached to the element
    const collapseInstance = (this.navbarCollapse.nativeElement as any)._collapse;
    if (collapseInstance) {
      collapseInstance.hide();
    }
  }
}

In your template, add a template reference to the navbar collapse element and bind the click event:

<div class="collapse navbar-collapse" id="navbarNav" #navbarCollapse>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" routerLink="/home" (click)="closeNavbar()">Home</a>
    </li>
    <!-- Repeat (click)="closeNavbar()" for all nav links -->
  </ul>
</div>

Quick Troubleshooting Tips #

• Don’t call jQuery methods in the component constructor— the DOM isn’t ready yet!
• Double-check that you didn’t accidentally load jQuery twice (this can break Bootstrap’s bindings).
• If you’re using Bootstrap 5, note that it dropped jQuery dependency entirely— but since you’re getting this error, you’re likely on Bootstrap 4 or earlier.

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