Angular 14.2项目安装ngx-bootstrap版本匹配异常求助

问题现象 #

在Angular 14.2版本的新项目中执行ng add ngx-bootstrap时，CLI提示将安装ngx-bootstrap@0.0.1，但根据ngx-bootstrap的兼容性规则，10.x版本才与Angular 14.x兼容，预期安装的应为10.x系列版本。

复现步骤 #

• 使用Angular 14.2创建新项目：ng new ngxbootstrap
• 进入项目目录ngxbootstrap，执行ng add ngx-bootstrap

执行后得到的提示：

Using package manager: npm
Found compatible package version: ngx-bootstrap@0.0.1.
Package information loaded.

The package ngx-bootstrap@0.0.1 will be installed and executed.
Would you like to proceed? (Y/n)

项目package.json关键依赖：

{
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/core": "^14.2.0",
    // ...其他Angular 14.2.x依赖
  },
  "devDependencies": {
    "@angular/cli": "~14.2.10",
    // ...其他开发依赖
  }
}

最佳解决方法 #

方法一：直接指定兼容版本执行ng add #

这是最简便的方式，直接在命令中指定与Angular 14.2兼容的10.x版本（推荐10.2.0），CLI会自动完成安装和配置：

ng add ngx-bootstrap@10.2.0

此命令会像正常ng add一样，自动导入需要的模块到你的Angular项目中，无需手动配置。

方法二：手动安装并配置 #

如果方法一无法正常执行，可手动安装并配置模块：

1. 安装指定版本的ngx-bootstrap：

npm install ngx-bootstrap@10.2.0 --save

2. 在app.module.ts中手动导入需要的组件模块（以Modal组件为例）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ModalModule } from 'ngx-bootstrap/modal'; // 导入组件模块

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ModalModule.forRoot() // 注册模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题原因 #

出现此问题的原因是Angular CLI的ng add版本匹配逻辑，可能因npm源缓存、包的版本标记异常等原因，错误识别了最旧的0.0.1版本为兼容版本，直接指定具体版本即可绕过这个匹配错误。

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