ng-bootstrap carousel轮播组件未按预期运行问题求助

我目前正在开发一个需要用到轮播组件的基础网站，最初尝试使用bootstrap carousel，但点击上一张/下一张图标时，angular router会触发并跳转到首页URL（项目配置了遇到无效URL时路由到首页组件）。经过调研我选择使用ng-bootstrap carousel，将其集成到项目后，发现轮播组件未按预期运行。

之前的项目中集成了material组件库，我猜测可能是该依赖导致冲突，因此本次我新建了全新的测试项目，直接复制了ng-bootstrap官方文档第一个轮播示例代码，运行结果和之前的问题一致，运行效果参考下图：

之后我还尝试添加了localize polyfill，问题依旧没有解决，目前无法定位问题原因以及对应的解决方案，特此求助。

项目配置信息 #

package.json #

{
   "name":"test-carousel",
   "version":"0.0.0",
   "scripts":{
      "ng":"ng",
      "start":"ng serve",
      "build":"ng build",
      "watch":"ng build --watch --configuration development",
      "test":"ng test"
   },
   "private":true,
   "dependencies":{
      "@angular/animations":"~12.2.0",
      "@angular/common":"~12.2.0",
      "@angular/compiler":"~12.2.0",
      "@angular/core":"~12.2.0",
      "@angular/forms":"~12.2.0",
      "@angular/localize":"~12.2.0",
      "@angular/platform-browser":"~12.2.0",
      "@angular/platform-browser-dynamic":"~12.2.0",
      "@angular/router":"~12.2.0",
      "@ng-bootstrap/ng-bootstrap":"^10.0.0",
      "bootstrap":"^5.1.3",
      "rxjs":"~6.6.0",
      "tslib":"^2.3.0",
      "zone.js":"~0.11.4"
   },
   "devDependencies":{
      "@angular-devkit/build-angular":"~12.2.4",
      "@angular/cli":"~12.2.4",
      "@angular/compiler-cli":"~12.2.0",
      "@types/jasmine":"~3.8.0",
      "@types/node":"^12.11.1",
      "jasmine-core":"~3.8.0",
      "karma":"~6.3.0",
      "karma-chrome-launcher":"~3.1.0",
      "karma-coverage":"~2.0.3",
      "karma-jasmine":"~4.0.0",
      "karma-jasmine-html-reporter":"~1.7.0",
      "typescript":"~4.3.5"
   }
}

angular.json #

{
   "$schema":"./node_modules/@angular/cli/lib/config/schema.json",
   "version":1,
   "newProjectRoot":"projects",
   "projects":{
      "test-carousel":{
         "projectType":"application",
         "schematics":{
            "@schematics/angular:application":{
               "strict":true
            }
         },
         "root":"",
         "sourceRoot":"src",
         "prefix":"app",
         "architect":{
            "build":{
               "builder":"@angular-devkit/build-angular:browser",
               "options":{
                  "outputPath":"dist/test-carousel",
                  "index":"src/index.html",
                  "main":"src/main.ts",
                  "polyfills":"src/polyfills.ts",
                  "tsConfig":"tsconfig.app.json",
                  "assets":[
                     "src/favicon.ico",
                     "src/assets"
                  ],
                  "styles":[
                     "node_modules/bootstrap/dist/css/bootstrap.min.css",
                     "src/styles.css"
                  ],
                  "scripts":[]
               },
               "configurations":{
                  "production":{
                     "budgets":[
                        {
                           "type":"initial",
                           "maximumWarning":"500kb",
                           "maximumError":"1mb"
                        },
                        {
                           "type":"anyComponentStyle",
                           "maximumWarning":"2kb",
                           "maximumError":"4kb"
                        }
                     ],
                     "fileReplacements":[
                        {
                           "replace":"src/environments/environment.ts",
                           "with":"src/environments/environment.prod.ts"
                        }
                     ],
                     "outputHashing":"all"
                  },
                  "development":{
                     "buildOptimizer":false,
                     "optimization":false,
                     "vendorChunk":true,
                     "extractLicenses":false,
                     "sourceMap":true,
                     "namedChunks":true
                  }
               },
               "defaultConfiguration":"production"
            },
            "serve":{
               "builder":"@angular-devkit/build-angular:dev-server",
               "configurations":{
                  "production":{
                     "browserTarget":"test-carousel:build:production"
                  },
                  "development":{
                     "browserTarget":"test-carousel:build:development"
                  }
               },
               "defaultConfiguration":"development"
            },
            "extract-i18n":{
               "builder":"@angular-devkit/build-angular:extract-i18n",
               "options":{
                  "browserTarget":"test-carousel:build"
               }
            },
            "test":{
               "builder":"@angular-devkit/build-angular:karma",
               "options":{
                  "main":"src/test.ts",
                  "polyfills":"src/polyfills.ts",
                  "tsConfig":"tsconfig.spec.json",
                  "karmaConfig":"karma.conf.js",
                  "assets":[
                     "src/favicon.ico",
                     "src/assets"
                  ],
                  "styles":[
                     "src/styles.css"
                  ],
                  "scripts":[]
               }
            }
         }
      }
   },
   "defaultProject":"test-carousel"
}

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
 AppComponent
],
imports: [
  BrowserModule,
  NgbModule
 ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

核心问题 #

轮播异常是依赖版本不兼容导致的：@ng-bootstrap/ng-bootstrap@10.x仅支持Bootstrap 4.x版本，你当前安装的Bootstrap 5.1.3超出了适配范围，直接导致组件交互、样式渲染全部异常。

修复步骤 #

1. 卸载当前不兼容的Bootstrap版本

npm uninstall bootstrap

2. 安装适配ng-bootstrap 10.x的Bootstrap 4稳定版

npm install bootstrap@4.6.2

3. 重启Angular开发服务即可恢复轮播正常功能

npm start

可选优化（解决动画异常问题） #

如果修复版本后轮播切换无动画，可在app.module.ts中引入Angular动画模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // 新增
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 新增
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

其他说明 #

你最初使用原生Bootstrap轮播触发路由跳转的原因是：原生轮播的切换按钮使用href="#xxx"锚点写法，Angular路由默认会拦截所有href跳转请求，匹配不到路由规则就会跳转到你配置的默认首页。使用ng-bootstrap组件可以彻底避免该问题，它的控制逻辑完全基于Angular事件绑定，没有使用href锚点。

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