angularng-bootstrappopper.jsangular17

Angular 17 - RangeError: Maximum call stack size exceeded on getComputedStyle


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"
  }
}

Solution

  • I fixed it by changing the builder property in the angular.json from @angular-devkit/build-angular:application to @angular-devkit/build-angular:browser.