Angular 6中依赖jQuery的Bootstrap加载异常求助

你遇到的这个错误核心原因是：Bootstrap初始化时无法找到全局的jQuery对象。虽然你已经在angular.json中正确配置了脚本加载顺序（先jQuery后Bootstrap），但Angular 6的模块封装机制会让你组件内导入的$成为局部变量，而非挂载到全局window对象上，这就导致Bootstrap无法获取到它依赖的全局jQuery引用。

下面是两种可行的解决方案：

方案1：在Polyfills中全局挂载jQuery #

这是最直接且稳妥的方式，确保Bootstrap能在全局环境中访问到jQuery：

1. 打开src/polyfills.ts文件，添加以下代码：

import * as $ from 'jquery';
// 将jQuery挂载到window对象，让Bootstrap可以识别
window['jQuery'] = window['$'] = $;

2. 可以移除组件中的import * as $ from 'jquery';（保留也不会冲突）。
3. 重启Angular开发服务器，让修改生效。

方案2：调整TypeScript配置并优化DOM操作时机 #

如果不想修改polyfills，也可以通过配置TypeScript来识别全局jQuery：

1. 打开src/tsconfig.app.json，在compilerOptions节点下添加types配置：

{
  "compilerOptions": {
    // 其他配置...
    "types": ["jquery"]
  }
}

2. 确认angular.json中的scripts顺序保持先jQuery、后Bootstrap（你当前的配置已经正确）。
3. 组件中无需手动导入$，同时建议把DOM操作移到ngAfterViewInit钩子（确保DOM已完全渲染）：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'app';
  constructor(private element: ElementRef){ }

  ngAfterViewInit() {
    $('.dropdown-toggle').dropdown();
  }
}

额外建议 #

尽量避免在Angular项目中直接使用jQuery操作DOM，Angular本身提供了完善的模板、指令和数据绑定机制。如果需要使用Bootstrap组件，推荐使用官方封装的ng-bootstrap库（适配Angular的Bootstrap组件），这样更符合Angular的开发模式，也能避免这类第三方库的依赖冲突问题。

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