Angular 14中PrimeNG的<p-fieldset>无法正常渲染且路由异常

你犯了Angular模块导入的基础错误——PrimeNgModule里只把FieldsetModule放到了exports数组，但没在imports里先导入它。Angular的模块规则是：要导出某个模块，必须先在当前模块的imports中引入它，否则当前模块无法识别这个依赖，自然也没法把它暴露给其他模块（比如你的ContentModule）。

当你用<p-fieldset>时，组件所在的ContentModule虽然导入了PrimeNgModule，但实际上PrimeNgModule并没有真正引入FieldsetModule，导致模板解析失败。这种模板错误会引发组件加载异常，进而影响路由功能（Angular遇到模板错误时会终止组件渲染，甚至导致路由导航卡住）。而<p-card>能正常工作，是因为你之前调整模块时正确处理了CardModule的导入逻辑。

修复步骤 #

修改prime-ng.module.ts，把FieldsetModule添加到imports数组：

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FieldsetModule, // 必须先导入，才能导出给其他模块使用
    CardModule      // 建议把CardModule也移到这里，保持导入导出的一致性
  ],
  exports:[
    FieldsetModule,
    CardModule,
  ]
})
export class PrimeNgModule { }

额外检查点 #

• 版本匹配：确认PrimeNG版本为14.x系列（Angular 14需对应PrimeNG 14，版本不兼容会引发各种异常）。查看package.json中的primeng版本，若不匹配，执行：

  npm install primeng@14 --save
  

• 样式导入：确保已引入PrimeNG全局样式，否则组件可能渲染异常（比如边框、交互功能失效）。可以在angular.json的styles数组中添加：

  "styles": [
    "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    "src/styles.scss"
  ]
  

  或者在styles.scss中导入：

  @import "primeng/resources/themes/lara-light-blue/theme.css";
  @import "primeng/resources/primeng.min.css";
  

验证操作 #

1. 保存修改，重启Angular开发服务器（模块变动有时需要重启才能生效）
2. 取消my_component.html中<p-fieldset>代码块的注释，测试组件渲染和路由功能是否恢复正常

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