Angular 4构建dist时出现bootstrap bundle无toggle方法错误

Hey there, let's work through this frustrating error you're hitting when building your Angular 4 project's dist bundle. The "No method named 'toggle'" message tied to Bootstrap's collapse component almost always boils down to jQuery/Bootstrap compatibility issues or incorrect loading order in your project setup. Here's how to fix it step by step:

1. Verify Bootstrap and jQuery Version Compatibility #

Bootstrap's JavaScript components rely heavily on jQuery, and mismatched versions will break methods like toggle for collapse. Double-check your package.json to ensure your versions play nice:

• For Bootstrap 4.x: Use jQuery 3.1.1 or newer
• For Bootstrap 3.x: Use jQuery 1.9.1 or newer (it also works with 3.x, but older versions are safer if you run into edge cases)

Example compatible dependencies in package.json:

"dependencies": {
  // ... other dependencies
  "jquery": "^3.6.0",
  "bootstrap": "^4.6.0"
}

2. Fix Script Loading Order in Angular CLI #

Angular 4 uses angular-cli.json (not the newer angular.json) to manage global scripts. Bootstrap's JS must load after jQuery—otherwise, Bootstrap can't attach its methods to jQuery's prototype, leading to the missing "toggle" error.

Update the scripts array in angular-cli.json like this:

"apps": [
  {
    // ... other app config
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
  }
]

3. Remove Duplicate Script Imports #

It's easy to accidentally load jQuery/Bootstrap twice—once in angular-cli.json and once directly in index.html. This causes conflicts where the second load overwrites or breaks the initialized Bootstrap methods.

Check your src/index.html and remove any lines like these if they exist alongside the CLI script config:

<!-- Remove these if you're already loading via angular-cli.json -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

4. Ensure DOM is Ready Before Calling Bootstrap Methods #

If you're using custom jQuery code to trigger collapse toggles (e.g., $('.collapse').collapse('toggle')), make sure you're calling it after the DOM is fully rendered in Angular. Use the ngAfterViewInit lifecycle hook instead of running it in the constructor or ngOnInit:

import { Component, AfterViewInit } from '@angular/core';
declare var $: any; // Declare jQuery if not using typed definitions

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // Safe to call Bootstrap collapse methods here
    $('.collapse').collapse('toggle');
  }
}

5. Validate the Built Bundle #

After making these changes, rebuild your project with ng build --prod and check the dist bundle:

• Open the browser's DevTools > Sources tab, confirm jquery.min.js loads before bootstrap.min.js in the scripts bundle
• Test the collapse functionality to ensure the toggle method works as expected

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