Angular中'p-table'未识别错误排查求助

错误信息 #

src/app/demo/components/apps/anas-c/anas-c.component.html:41:1 - error NG8001: 'p-table' is not a known element:

1. If 'p-table' is an Angular component, then verify that it is part of this module.
2. If 'p-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

41 <p-table
42 >

src/app/demo/components/apps/anas-c/anas-c.component.ts:22:16
22 templateUrl: './anas-c.component.html'
~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AnasCComponent.

用户提供的代码 #

组件HTML代码 #

<h2 style="color: green">GeeksforGeeks</h2> 
<h4>Angular PrimeNG Table Sort</h4> 
<!--
 [value]="tableData" 
 scrollHeight="400px"
-->
<p-table 
     > 
 <ng-template pTemplate="header"> 
     <tr> 
         <th pSortableColumn="firstname">First Name</th> 
         <th pSortableColumn="age">Age</th> 
     </tr> 
 </ng-template> 

 <ng-template pTemplate="body" let-people> 
     <tr> 
         <td> 
             {{ people.firstname }} 
         </td> 
         <td> 
             {{ people.age }} 
         </td> 
     </tr> 
 </ng-template> 
</p-table>

组件TS代码 #

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Customer, Representative } from 'src/app/demo/api/customer';
import { Product } from 'src/app/demo/api/product';

import { TableModule } from 'primeng/table'; 

interface People { 
firstname?: string; 
lastname?: string; 
age?: string; 
} 

interface expandedRows {
[key: string]: boolean;
}

let value;
@Component({
selector: 'app-anas-c',
templateUrl: './anas-c.component.html'
})
export class AnasCComponent {

customers1: Customer[] = [];

customers2: Customer[] = [];

customers3: Customer[] = [];

selectedCustomers1: Customer[] = [];

selectedCustomer: Customer = {};

representatives: Representative[] = [];

statuses: any[] = [];

products: Product[] = [];

rowGroupMetadata: any;

expandedRows: expandedRows = {};

activityValues: number[] = [0, 100];

isExpanded: boolean = false;

idFrozen: boolean = false;

loading: boolean = true;

tableData: People[] = []; 
cols: any[] = []; 

metrics: any[] = [];

constructor() {
 let metrics = {
   title: 'Total Revenue',
   value: 0,
   currency: '$',
   change: 0,
   trend: 'up',
   trendValue: 0,
   trendPercent: 0
 };
 let content = {
   amount: 0,
   change: 0,
   text  : "anas"
 };
}

ngOnInit(): void {

};

}

路由模块代码 #

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AnasCComponent } from './anas-c.component';

@NgModule({
 imports: [RouterModule.forChild([
     { path: '', component: AnasCComponent }
 ])],
 exports: [RouterModule]
})
export class AnasCComponentRoutingModule { }

组件模块代码 #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { RippleModule } from 'primeng/ripple';
import { MultiSelectModule } from 'primeng/multiselect';
import { DropdownModule } from 'primeng/dropdown';
import { ProgressBarModule } from 'primeng/progressbar';
import { ToastModule } from 'primeng/toast';
import { SliderModule } from 'primeng/slider';
import { RatingModule } from 'primeng/rating';
import { AnasCComponent } from './anas-c.component';

import { AnasCComponentRoutingModule } from './anas-routing.module';

@NgModule({
 imports: [
     CommonModule,
     AnasCComponentRoutingModule,
     FormsModule,
     TableModule,
     RatingModule,
     ButtonModule,
     SliderModule,
     InputTextModule,
     ToggleButtonModule,
     RippleModule,
     MultiSelectModule,
     DropdownModule,
     ProgressBarModule,
     ToastModule
 ],
 declarations: [AnasCComponent]
})
export class AnasCComponentoModule { }

解决思路 #

• 修正模块导入路径与命名：组件模块中导入路由模块的路径./anas-routing.module错误，需改为./anas-c-routing.module；同时模块类名AnasCComponentoModule存在拼写错误（多了字母o），建议改为AnasCModule，确保类名与文件名逻辑一致。
• 确认模块已导入父模块：将修正后的AnasCModule（或原AnasCComponentoModule）添加到上级模块（如DemoModule或AppModule）的imports数组中，Angular才能识别该模块下的组件及导入的PrimeNG模块。
• 移除组件中的模块导入：组件TS文件无需导入TableModule，该模块仅需在NgModule的imports列表中声明，删除组件里的import { TableModule } from 'primeng/table';。
• 校验PrimeNG版本兼容性：若使用PrimeNG 16及以上版本，需确保已安装@angular/cdk（执行npm install @angular/cdk），且Angular主版本与PrimeNG版本匹配。
• 清理缓存重启服务：执行ng clean清理Angular缓存，再重启ng serve，避免缓存导致的模块未加载问题。

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