Let's break down why your code works standalone but fails in Angular, and how to fix it properly.

Why the Error Occurs in Angular #

Your jQuery code runs immediately when the script loads, but Angular renders components asynchronously. Here's the key issue:

• DOM Timing: When your jQuery tries to bind the click handler to .button-click, those elements don't exist yet (Angular hasn't rendered them). So the event never attaches, and when you click a button, the code to hide other collapses doesn't run—leading to the "collapse not found" error.
• Bootstrap Integration: In Angular, you can't just drop script tags in your component template and expect them to work reliably. The framework has its own module system and DOM rendering cycle that conflicts with vanilla jQuery usage.

Solution 1: Use ng-bootstrap (Recommended) #

The cleanest way to add Bootstrap components to Angular is with ng-bootstrap—a native Angular library that eliminates jQuery entirely. It includes built-in accordion (mutual exclusion) behavior.

Steps: #

1. Install dependencies:

npm install @ng-bootstrap/ng-bootstrap bootstrap

2. Import NgbModule in your AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgbModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Replace your HTML with the native accordion component:

<ngb-accordion #acc="ngbAccordion" activeIds="panel1">
  <ngb-panel id="panel1">
    <ng-template ngbPanelTitle>
      <span>Link with href</span>
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </ng-template>
  </ngb-panel>
  <ngb-panel id="panel2">
    <ng-template ngbPanelTitle>
      <span>Link with href</span>
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </ng-template>
  </ngb-panel>
</ngb-accordion>

This handles mutual exclusion automatically, no custom code required.

Solution 2: Fix Vanilla Bootstrap + jQuery in Angular #

If you need to stick with vanilla Bootstrap, adjust your code to work with Angular's lifecycle:

Steps: #

1. Install jQuery and Bootstrap via npm:

npm install jquery bootstrap

2. Update angular.json to include the scripts and styles:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

3. Modify your component to attach the click handler after the view loads:

import { Component, AfterViewInit } from '@angular/core';
declare var $: any; // Declare jQuery to avoid TypeScript errors

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    $('.button-click').click(function(e) {
      e.preventDefault();
      const targetCollapse = $(this).attr('href');
      // Hide all collapses except the one we're opening
      $('.collapse').not(targetCollapse).collapse('hide');
    });
  }
}

4. Fix the accessibility issue in your HTML:
   Change the second button's aria-controls to match its target collapse:

<a class="btn btn-primary button-click" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2"> Link with href </a>

Key Takeaway #

Angular discourages direct DOM manipulation with jQuery because it conflicts with the framework's rendering cycle. Using ng-bootstrap is the most maintainable approach, but if you must use vanilla Bootstrap, always attach jQuery handlers in the ngAfterViewInit lifecycle hook to ensure elements exist in the DOM.

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