Bootstrap 手风琴导致无限重新渲染

Question

I have just upgrade an Angular project from version 11 to 12, including an update to @ng-bootstrap/ng-bootstrap (from v6 to v10).

The upgrade went great without any difficult changes, however I am now facing a weird issue with the Bootstrap accordion. I have noticed that it continuously re-renders on the page, causing a maximum call stack error.

---

Update: I have determine the exact version that caused this issue. It is version 8.0.3 that only includes bug fixes for animations.

animations: don't reflow in 'ngbRunTransition' (#3962) (f699999), closes #3954 #3952
animations: make sure 'ngbRunTransition' runs inside the zone (#3957) (a006a62), closes #3950
carousel: respect [animation]="false" (#3964) (9afae34), closes #3961

---

The below error occurs as soon as I load the page. What is strange is after it occurs I can interact with it.

zone.js:182 Uncaught RangeError: Maximum call stack size exceeded
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:191)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at EventEmitter_.next (Subject.js:39)
    at EventEmitter_.emit (core.js:25935)
    at checkStable (core.js:28594)
    at onLeave (core.js:28722)
    at Object.onInvoke (core.js:28678)
    at ZoneDelegate.invoke (zone.js:371)

There is some very strange behaviour about how it errors dependant on how many items are in the accordion.

1-3 items

After it has errored, you can interact with the accordion as if there was no errors.

4 items

After it has errored, it renders the first two panels as expect, renders a blank 3 panel and doesn't render then 4th. When you click on any panel it then renders the 4th and you can interact with the accordion as if there was no errors. The 3rd panel remains blank and unclickable.

5 items

After it has errored, you can interact with the accordion as if there was no errors.

6 items

it doesn't render at all but leaves 2 tabs (the panels) in the html

<ngb-accordion _ngcontent-serverapp-c144="" role="tablist" activeids="acc-event_description" class="accordion" ng-reflect-active-ids="acc-event_description" aria-multiselectable="true"><!--container--><div><div role="tab"><!--container--></div><!--container--></div><div><div role="tab"><!--container--></div><!--container--></div><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ngb-accordion>

Another strange behaviour I have noticed is that when another element on the page updates, it causes the accordion to update several times. This behaviour persisted from before the update.

---

Update: After some thought, I think this error is a symptom of another problem in the project. Is there common patterns/code/implementations that would cause this bizarre behaviour? The continuous re-rendering does appear even in the old version of the accordion, however it just doesn't happen enough to cause a max call stack error.

---

Troubleshooting

• I have verified this error persists in the exact same way when I do a dev/prod build and also when using angular universal (SSR).
• I can avoid the error by not setting an id on the panels however when I click on a panel, the component re-renders in very quick succession incrementing the id it assigned automatically (it updates so quickly that after a sec it is already incremented the ids to over 100 ). When I don't set an id the accordion does not work, clicking on a panel does nothing but update its id .
• I have tried to set [animation]="false" but it doesn't have any impact
• I have tried to import NgbModule and nothing else, and the other approach to import the specific NgbAccordionModule however it doesn't make a difference
• I have tried loading just the accordion component as its own module (so there is no influence from any other code) and it still has the same behaviour.

I have tried to use the Angular devbug tools however since they can't run as soon as the page loads (automatically) I can't run the profiler in time.

I have set up an example project with what the component looks like and it works fine, so there is something occurring in my project that is now causing this but I can't seem to work it out.

This is what the component looks like - https://stackblitz.com/edit/angular-tp9ldq

The only way I can avoid it, is to hard code the panels into the HTML. Which I can not do as they are dynamically fetch. I have tried hard coded them into the component (just like the stack blitz link) and it still errors.

Here is the dependencies I am using, is there anything obvious here that needs to be upgraded? When I run ng update it says everything seems to be in order.

"dependencies": {
  "@angular/animations": "~12.2.5",
  "@angular/common": "~12.2.5",
  "@angular/compiler": "~12.2.5",
  "@angular/core": "~12.2.5",
  "@angular/forms": "~12.2.5",
  "@angular/localize": "~12.2.5",
  "@angular/platform-browser": "~12.2.5",
  "@angular/platform-browser-dynamic": "~12.2.5",
  "@angular/platform-server": "~12.2.5",
  "@angular/router": "~12.2.5",
  "@auth0/angular-jwt": "^5.0.2",
  "@bugsnag/js": "^7.4.0",
  "@bugsnag/plugin-angular": "^7.4.0",
  "@ng-bootstrap/ng-bootstrap": "^10.0.0",
  "@nguniversal/express-engine": "^12.1.0",
  "@techiediaries/ngx-qrcode": "^9.1.0",
  "@types/url-parse": "^1.4.3",
  "bootstrap": "^4.5.0",
  "core-js": "^3.17.3",
  "express": "^4.17.1",
  "hammerjs": "^2.0.8",
  "jquery": "^3.3.1",
  "less": "4.1.1",
  "lodash": "^4.17.21",
  "logrocket": "^1.0.3",
  "moment": "^2.24.0",
  "ngx-barcode": "^0.3.0",
  "ngx-connection-service": "^7.0.3",
  "ngx-cookie": "^5.0.2",
  "ngx-cookie-backend": "^5.0.2",
  "popper.js": "^1.14.7",
  "rxjs": "~6.6.7",
  "sanitize-html": "^2.5.0",
  "tslib": "^2.3.1",
  "url-parse": "^1.4.7",
  "zone.js": "~0.11.4"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~12.2.5",
  "@angular-eslint/builder": "12.4.1",
  "@angular-eslint/eslint-plugin": "12.4.1",
  "@angular-eslint/eslint-plugin-template": "12.4.1",
  "@angular-eslint/schematics": "12.4.1",
  "@angular-eslint/template-parser": "12.4.1",
  "@angular/cli": "~12.2.5",
  "@angular/compiler-cli": "~12.2.5",
  "@angular/language-service": "~12.2.5",
  "@nguniversal/builders": "12.1.0",
  "@types/core-js": "^2.5.5",
  "@types/express": "^4.17.13",
  "@types/jasmine": "~2.8.8",
  "@types/jasminewd2": "~2.0.3",
  "@types/lodash": "^4.14.172",
  "@types/node": "^16.9.0",
  "@types/sanitize-html": "^2.3.2",
  "@types/stripe-checkout": "^1.0.4",
  "@types/stripe-v3": "^3.1.25",
  "@typescript-eslint/eslint-plugin": "4.28.2",
  "@typescript-eslint/parser": "4.28.2",
  "codelyzer": "^6.0.2",
  "eslint": "^7.26.0",
  "jasmine-core": "~2.99.1",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "^5.1.1",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~2.0.1",
  "karma-firefox-launcher": "^2.1.0",
  "karma-jasmine": "~1.1.2",
  "karma-jasmine-html-reporter": "^0.2.2",
  "karma-junit-reporter": "^1.2.0",
  "karma-spec-reporter": "0.0.32",
  "npm-run-all": "^4.1.5",
  "protractor": "^7.0.0",
  "rimraf": "^3.0.2",
  "ts-node": "^10.2.1",
  "tslint": "^6.1.3",
  "typescript": "~4.3.5"
},

And here is the build section of my angular project

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/frontend/browser",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.app.json",
    "assets": ["src/assets", "src/.well-known"],
    "allowedCommonJsDependencies": ["lodash", "@bugsnag/js", "ngx-barcode", "url-parse", "sanitize-html"],
    "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.less"],
    "scripts": [
      "./node_modules/jquery/dist/jquery.slim.min.js",
      "./node_modules/popper.js/dist/umd/popper.min.js"
    ]
  },
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],

      "outputHashing": "all",
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb"
        }
      ]
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  },
  "defaultConfiguration": "production"
},

Answer 1

Faced the same problem, a temporal solution could be creating an empty array with the same length as te original one, and use it for the *ngFor loop. Then inside access the elements of the original array using the index position.

Component ts:

accordionSamples = [
   ...
]
accordionSamplesLengthArray = [].constructor(accordionSamples.length);

Component template:

<ngb-panel id="pos-{{i}}" *ngFor="obj of accordionSamplesLengthArray; let i = index;">
     <ng-template ngbPanelHeader>
         {{ accordionSamples[i].title }}
     </ng-template>
</ngb-panel>