如何在Angular 17项目中安装ngx-bootstrap？旧方法不适用该怎么办？

Angular 17 默认使用独立组件（无 NgModule），因此需要调整 ngx-bootstrap 的导入方式，具体步骤如下：

1. 安装依赖包 #

先执行官方提供的安装命令：

npm install ngx-bootstrap --save

2. 导入 ngx-bootstrap 模块 #

由于 ngx-bootstrap 仍基于 NgModule 实现，在独立组件架构中需要通过 importProvidersFrom 来导入模块，分为两种场景：

全局导入（全应用可用） #

如果希望某个 ngx-bootstrap 模块在整个应用中都能使用，在 main.ts 中配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { importProvidersFrom } from '@angular/core';
// 按需导入需要的模块，这里以 Tooltip 为例
import { TooltipModule } from 'ngx-bootstrap/tooltip';

bootstrapApplication(AppComponent, {
  providers: [
    // 用 forRoot() 初始化全局配置
    importProvidersFrom(TooltipModule.forRoot())
  ]
});

组件级导入（仅当前组件可用） #

如果只需要在特定组件中使用，在目标组件的配置中添加：

import { Component, importProvidersFrom } from '@angular/core';
import { TooltipModule } from 'ngx-bootstrap/tooltip';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  providers: [
    // 无需 forRoot()，直接导入模块即可
    importProvidersFrom(TooltipModule)
  ]
})
export class YourComponent { }

注意事项 #

• 若需使用多个 ngx-bootstrap 模块，可在 importProvidersFrom 中传入多个模块，例如：

  importProvidersFrom(TooltipModule.forRoot(), ModalModule.forRoot())
  

• 不同模块的配置方式可能略有差异，可参考 ngx-bootstrap 对应组件的官方文档调整参数。

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