Angular 16集成PrimeNG 16时p-menubar无默认样式的解决方法

你的Angular项目主应用的build/serve配置未引入PrimeNG核心样式文件：

• 在angular.json中，test环境的styles数组包含了PrimeNG的图标、主题、组件样式以及PrimeFlex样式，但主应用的build.options.styles仅加载了项目自身的src/styles.scss，导致运行时p-menubar无法获取到默认样式。

1. 打开angular.json，找到projects.Tester.architect.build.options.styles数组，添加PrimeNG相关样式文件（注意顺序：图标→主题→组件样式→PrimeFlex→自定义样式）：

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/saga-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeflex/primeflex.css",
  "src/styles.scss"
]

2. 重启ng serve，让配置变更生效。

确认使用p-menubar的组件所属的NgModule中，已正确导入MenubarModule：

import { MenubarModule } from 'primeng/menubar';

@NgModule({
  imports: [
    // ...其他模块
    MenubarModule
  ]
})
export class YourModule { }

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