Nx monorepo单仓安装ng-bootstrap提示找不到Angular项目定义如何解决

你的判断准确，Nx 管理的 Angular Monorepo 采用分散式project.json维护单项目配置，根目录不存在 Angular CLI 原生依赖的angular.json文件，ng add命令执行时无法定位项目定义，因此抛出该错误。

注意：不要尝试通过临时伪造根目录angular.json的方式运行ng add，ng-bootstrap 自带的 Schematic 是针对原生 Angular CLI 单仓结构编写的，直接运行大概率会错乱Nx的项目配置，手动安装配置的方式更可控，步骤如下：

• 安装匹配版本的依赖
  在仓库根目录执行包管理命令安装依赖，注意@ng-bootstrap/ng-bootstrap版本必须和项目当前使用的 Angular 大版本严格对应，同时安装对应版本的 Bootstrap 和 Popper 依赖：

  # npm 示例
  npm install @ng-bootstrap/ng-bootstrap @popperjs/core bootstrap
  

• 引入 Bootstrap 全局样式
  打开目标项目web-app路径下的project.json（路径一般为apps/web-app/project.json），找到构建目标下的styles配置数组，加入 Bootstrap 的样式文件路径：

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "apps/web-app/src/styles.scss"
  ]
  

  如果需要自定义 Bootstrap 主题变量，也可以跳过上面的配置，直接在项目全局样式文件src/styles.scss中引入 Bootstrap 的 SCSS 源文件：

  // 自定义变量写在引入之前
  $primary: #165DFF;
  @import "bootstrap/scss/bootstrap";
  

• 导入 ng-bootstrap 模块
  打开项目根模块（一般为apps/web-app/src/app/app.module.ts），按需导入你需要使用的 ng-bootstrap 功能模块，不需要全量导入：

  // 示例：导入警告框、轮播图模块
  import { NgbAlertModule, NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
    imports: [
      // 其他已有模块
      NgbAlertModule,
      NgbCarouselModule
    ]
  })
  export class AppModule {}
  

  如果是 Standalone 独立组件项目，直接在对应组件的imports数组中导入需要的 ng-bootstrap 模块即可。
• 验证安装结果
  启动web-app服务，在任意组件模板中加入 ng-bootstrap 组件样例代码，确认组件渲染、交互正常即安装完成。

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