I am developing an Angular 17 app with @ng-bootstrap/ng-bootstrap 16.0.0.
After installing @ng-bootstrap and its dependencies (bootstrap 5.3.2, @popperjs/core 2.11.8) using ng add @ng-bootstrap/ng-bootstrap, I started getting a RangeError: Maximum call stack size exceeded on all images in the page (inserted using the img tag).
The error comes from the popperjs' method getComputedStyle, that calls itself causing an infinite loop.
I encounter this error also when interacting with NgbDropdown elements, and only when compiling with ng build (with ng serve getComputedStyle gets called only once).
I use standalone components, so I imported from @ng-bootstrap/ng-bootstrap only specific components (like 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"
}
}
I fixed it by changing the builder
property in the angular.json from @angular-devkit/build-angular:application
to @angular-devkit/build-angular:browser
.