升级Primeng至15.1.0后Angular项目Dropdown无法展开求助

我正在开发一个使用PrimeNG的Angular项目，升级PrimeNG到15.1.0版本后，Dropdown组件点击无法展开，点击时会出现错误提示（见截图）。其他输入组件如复选框、输入框均正常工作，仅Dropdown异常。

核心问题：如何让Dropdown点击后正常展开？

Dropdown使用代码 #

<p-dropdown
    [(ngModel)]="item[col.field]"
    [options]="nodeTypeOptions"
    optionLabel="name"
    optionValue="nodeType"
    (onChange)="onItemChanged(item)"
    placeholder="Välj"
    appendTo="body"
    [style]="{ width: '100%' }"
></p-dropdown>

package.json配置 #

{
  "name": "lalla",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main",
    "start-api": "nx serve api",
    "start-dev": "nx serve lalla --proxy-config apps/lalla/proxy.conf.json",
    "build": "nx build",
    "test": "nx test",
    "test-coverage": "jest --coverage",
    "seed": "ts-node -r tsconfig-paths/register --project apps/api/tsconfig.app.json apps/api/src/seed.ts",
    "api-e2e": "jest --config ./apps/api/test/jest-e2e.json --forceExit"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~15.1.1",
    "@angular/cdk": "^15.1.1",
    "@angular/common": "~15.1.1",
    "@angular/compiler": "~15.1.1",
    "@angular/core": "~15.1.1",
    "@angular/forms": "~15.1.1",
    "@angular/platform-browser": "~15.1.1",
    "@angular/platform-browser-dynamic": "~15.1.1",
    "@angular/router": "~15.1.1",
    "@auth0/angular-jwt": "^5.1.2",
    "@nestjs/class-transformer": "^0.4.0",
    "@nestjs/common": "^9.2.1",
    "@nestjs/config": "^2.2.0",
    "@nestjs/core": "^9.2.1",
    "@nestjs/jwt": "^10.0.1",
    "@nestjs/mapped-types": "^1.2.0",
    "@nestjs/passport": "^9.0.0",
    "@nestjs/platform-express": "^9.2.1",
    "@nestjs/typeorm": "^9.0.0",
    "@nrwl/angular": "15.5.2",
    "@types/uuid": "^9.0.0",
    "bcrypt": "^5.1.0",
    "bootstrap": "5.2.3",
    "class-validator": "^0.14.0",
    "guid-typescript": "^1.0.9",
    "passport": "^0.6.0",
    "passport-http-bearer": "^1.0.1",
    "passport-jwt": "^4.0.1",
    "pg": "^8.8.0",
    "primeflex": "^3.3.0",
    "primeicons": "^6.0.1",
    "primeng": "^15.1.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~7.8.0",
    "tslib": "^2.4.1",
    "typeorm": "^0.3.11",
    "uuid": "^9.0.0",
    "xlsx": "^0.18.5",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~15.1.2",
    "@angular-eslint/eslint-plugin": "~15.2.0",
    "@angular-eslint/eslint-plugin-template": "~15.2.0",
    "@angular-eslint/template-parser": "~15.2.0",
    "@angular/cli": "~15.1.2",
    "@angular/compiler-cli": "~15.1.1",
    "@angular/language-service": "~15.1.1",
    "@nestjs/schematics": "^9.0.4",
    "@nestjs/testing": "^9.2.1",
    "@nrwl/cli": "15.5.2",
    "@nrwl/cypress": "15.5.2",
    "@nrwl/eslint-plugin-nx": "15.5.2",
    "@nrwl/jest": "15.5.2",
    "@nrwl/linter": "15.5.2",
    "@nrwl/nest": "15.5.2",
    "@nrwl/node": "15.5.2",
    "@nrwl/workspace": "15.5.2",
    "@types/bcrypt": "^5.0.0",
    "@types/faker": "^6.6.9",
    "@types/jest": "29.2.6",
    "@types/node": "18.11.18",
    "@types/passport": "^1.0.11",
    "@types/passport-jwt": "^3.0.8",
    "@types/supertest": "^2.0.12",
    "@typescript-eslint/eslint-plugin": "~5.48.2",
    "@typescript-eslint/parser": "~5.48.2",
    "cypress": "^12.3.0",
    "dom-storage": "^2.1.0",
    "eslint": "~8.32.0",
    "eslint-config-prettier": "8.6.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "29.3.1",
    "jest-preset-angular": "~12.2.5",
    "ng-mocks": "^14.5.3",
    "nx": "15.5.2",
    "prettier": "^2.8.3",
    "supertest": "^6.3.3",
    "ts-jest": "29.0.5",
    "ts-node": "~10.9.1",
    "typescript": "~4.9.4"
  }
}

已尝试的排查方法 #

• 在Github、Stack Overflow等开发者论坛搜索相关问题，未找到有效解决方案
• 本地调试代码，未获取到明确的错误提示信息
• 在Stackblitz中复现PrimeNG升级场景，问题依然存在

排查建议 #

1. 检查动画模块依赖：PrimeNG Dropdown展开依赖Angular Animations模块，确认BrowserAnimationsModule已在AppModule中导入，而非NoopAnimationsModule。
2. 验证appendTo="body"配置：尝试移除该属性，部分场景下DOM层级问题会导致展开失败。
3. 检查PrimeNG样式导入：确认全局样式文件中正确引入了PrimeNG主题样式和核心样式，比如primeng/resources/themes/lara-light-blue/theme.css和primeng/resources/primeng.min.css。
4. 深挖控制台错误：再次检查浏览器控制台的错误栈（包括警告），可能存在ViewContainerRef未找到、DOM操作异常等隐藏线索。
5. 验证数据源格式：确保nodeTypeOptions是有效非空数组，每个元素都包含name和nodeType字段，空数组或格式错误会导致Dropdown无法渲染选项。
6. 版本回退测试：暂时降级到PrimeNG 15.0.x版本，确认是否是15.1.0的特定Bug。
7. 检查NX构建配置：由于项目使用NX，确认构建过程中未对PrimeNG组件进行不兼容的tree-shaking或优化，导致Dropdown功能代码被误删。

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