Angular14集成bootstrap-select报selectpicker is not a function错误求助

1. 确认脚本与样式的加载顺序 #

必须保证依赖库的加载顺序正确：jQuery → Bootstrap → bootstrap-select，因为bootstrap-select依赖前两者。

打开angular.json，在architect.build.options下的styles和scripts数组中按顺序添加：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/bootstrap-select/dist/css/bootstrap-select.min.css",
  // 你的其他样式文件
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"
]

2. 修复组件初始化时机 #

不要在constructor中调用selectpicker方法——此时DOM元素还未完成渲染，即便jQuery能找到元素，bootstrap-select也未完成挂载。应在ngAfterViewInit钩子中初始化：

import { Component, ElementRef, Injector, AfterViewInit } from '@angular/core';
// ...其他导入

export class YourComponent extends SomeBaseComponent implements AfterViewInit {
  // ...你的属性和构造函数

  ngAfterViewInit(): void {
    // 先初始化selectpicker
    $('#' + this.id + this.extId).selectpicker();
  }

  constructor(
    injector: Injector,
    private el: ElementRef,
    private layoutService: InternalMarketLayoutService
  ) {
    super(injector);
    this.actions = [
      new ActionItem(
        '',
        () => $('#' + this.id + this.extId).selectpicker('toggle'),
        'ri-arrow-down-s-line',
        'PRIMARY',
        [],
        false,
        ''
      ),
    ];
  }
}

3. 避免jQuery实例冲突 #

如果项目中存在多个jQuery实例（比如第三方库自行引入了jQuery），会导致bootstrap-select挂载到未被全局引用的实例上。可以通过以下方式解决：

方式一：使用全局jQuery对象 #

在组件顶部声明全局jQuery：

declare let jQuery: any;

然后将代码中的$替换为jQuery：

jQuery('#' + this.id + this.extId).selectpicker('toggle');

方式二：强制使用单一jQuery实例 #

在scripts中加载jQuery后，添加一行代码锁定实例：

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
  "src/assets/js/lock-jquery.js" // 新增文件
]

在src/assets/js/lock-jquery.js中写入：

window.$ = window.jQuery;

4. 确认TypeScript类型支持 #

打开tsconfig.json，在compilerOptions.types数组中添加jquery，确保TypeScript能识别jQuery的类型：

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

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