Angular 17集成@ng-bootstrap后出现RangeError栈溢出问题求助

我正在开发基于Angular 17的应用，已集成@ng-bootstrap/ng-bootstrap 16.0.0及其依赖（bootstrap 5.3.2、@popperjs/core 2.11.8）。使用ng add命令安装后遇到以下问题：

• 页面中所有<img>标签插入的图片均触发RangeError: Maximum call stack size exceeded错误，根源是popperjs的getComputedStyle方法自调用引发无限循环
• 交互NgbDropdown组件时也会触发相同错误
• 该问题仅在ng build编译后出现，ng serve模式下getComputedStyle仅调用一次，无异常
• 项目采用独立组件模式，仅从@ng-bootstrap/ng-bootstrap按需导入特定组件（如NgbDropdownModule）

配置文件 #

angular.json #

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {"afi": {"projectType": "application","schematics": {"@schematics/angular:component": {"style": "scss"}},"root": "","sourceRoot": "src","prefix": "app","architect": {"build": {"builder": "@angular-devkit/build-angular:application","options": {"outputPath": "dist/afi","index": "src/index.html","browser": "src/main.ts","polyfills": ["zone.js"],"tsConfig": "tsconfig.app.json","inlineStyleLanguage": "scss","assets": ["src/favicon.ico","src/assets"],"styles": ["./node_modules/@fortawesome/fontawesome-free/css/all.css","src/styles.scss"],"scripts": []},"configurations": {"production": {"optimization": false,"budgets": [{"type": "initial","maximumWarning": "1200kb","maximumError": "3mb"},{"type": "anyComponentStyle","maximumWarning": "2kb","maximumError": "4kb"}],"outputHashing": "none"},"development": {"optimization": false,"extractLicenses": false,"sourceMap": true}},"defaultConfiguration": "development"},"serve": {"builder": "@angular-devkit/build-angular:dev-server","configurations": {"production": {"buildTarget": "afi:build:production"},"development": {"buildTarget": "afi:build:development"}},"defaultConfiguration": "development"},"extract-i18n": {"builder": "@angular-devkit/build-angular:extract-i18n","options": {"buildTarget": "afi:build"}},"test": {"builder": "@angular-devkit/build-angular:karma","options": {"polyfills": ["zone.js","zone.js/testing"],"tsConfig": "tsconfig.spec.json","inlineStyleLanguage": "scss","assets": ["src/favicon.ico","src/assets"],"styles": ["./node_modules/@fortawesome/fontawesome-free/css/all.css","src/styles.scss"],"scripts": []}}}}}}

package.json #

{"name": "afi","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": "^17.2.0","@angular/common": "^17.2.0","@angular/compiler": "^17.2.0","@angular/core": "^17.2.0","@angular/forms": "^17.2.0","@angular/platform-browser": "^17.2.0","@angular/platform-browser-dynamic": "^17.2.0","@angular/router": "^17.2.0","@fortawesome/fontawesome-free": "^6.5.1","@ng-bootstrap/ng-bootstrap": "^16.0.0","@popperjs/core": "^2.11.8","bootstrap": "^5.3.2","rxjs": "~7.8.0","tslib": "^2.3.0","zone.js": "~0.14.3"},"devDependencies": {"@angular-devkit/build-angular": "^17.2.1","@angular/cli": "^17.2.1","@angular/compiler-cli": "^17.2.0","@angular/localize": "^17.2.3","@types/jasmine": "~5.1.0","jasmine-core": "~5.1.0","karma": "~6.4.0","karma-chrome-launcher": "~3.2.0","karma-coverage": "~2.2.0","karma-jasmine": "~5.1.0","karma-jasmine-html-reporter": "~2.1.0","typescript": "~5.3.2"}}}

解决方案 #

针对这个问题，你可以尝试以下几种方案：

1. 升级@popperjs/core版本
   当前使用的@popperjs/core 2.11.8存在与Angular 17编译后环境的兼容问题，建议升级到2.11.9或更高版本：

   npm install @popperjs/core@^2.11.9 --save
   

   该版本修复了getComputedStyle在特定编译环境下的无限循环问题。

2. 调整Angular编译优化设置
   在angular.json的production配置中添加allowedCommonJsDependencies，明确允许Popper.js：

   "production": {
     // 保留现有配置
     "allowedCommonJsDependencies": ["@popperjs/core"]
   }
   

   避免Angular的模块打包逻辑干扰Popper的正常执行。

3. 手动导入Zone.js的Popper补丁
   在main.ts中添加以下导入语句，确保Zone.js正确处理Popper的方法调用：

   import 'zone.js/plugins/zone-popper';
   

4. 升级@ng-bootstrap/ng-bootstrap
   尝试升级到@ng-bootstrap/ng-bootstrap的最新16.x版本，官方可能已经修复了与Angular 17的兼容问题：

   npm install @ng-bootstrap/ng-bootstrap@latest --save
   

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