PrimeNG 中的错误 - 错误 NG8001：“p-table”不是已知元素

Question

我在 AppRoutingModule 下创建了一个组件 (EmployeesListComponent)，用于处理我的应用程序路由。我想为EmployeesListComponent 使用PrimeNG。 该组件的模板有一个 HTML 表格，其中包含从服务中显示的数据。 根据 PrimeNG 关于setup 和tables 的文档，我已经在 AppRoutingModule 中导入了必要的模块。

尽管如此，当我使用ng build 命令构建我的应用程序时出现以下错误。

C:\Files\Workspaces\pms-ui>ng build

ERROR in src/app/employees-list/employees-list.component.html:2: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.

2 <p-table [value]="employeeArrayData">
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/employees-list/employees-list.component.ts:7:16
    7   templateUrl: './employees-list.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component EmployeesListComponent.
src/app/employees-list/employees-list.component.html:2:10 - error NG8002: Can't bind to 'value' since it isn't a known property of 'p-table'.
1. If 'p-table' is an Angular component and it has 'value' input, 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.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

2 <p-table [value]="employeeArrayData">
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/employees-list/employees-list.component.ts:7:16
    7   templateUrl: './employees-list.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component EmployeesListComponent.

这是我的文件。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { TableModule } from 'primeng/table';
import { Routes, RouterModule } from '@angular/router';
import { EmployeesListComponent } from './employees-list/employees-list.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

const routes: Routes = [
  { path: 'employees', component: EmployeesListComponent}
];

@NgModule({
  imports: [BrowserAnimationsModule, TableModule, RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [EmployeesListComponent]

employee-list.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
import { IEmployeeListData } from '../employees-list/employee-data'

@Component({
  selector: 'app-employees-list',
  templateUrl: './employees-list.component.html',
  styleUrls: ['./employees-list.component.css']
})
export class EmployeesListComponent implements OnInit {

  public employeeArrayData: Array<IEmployeeListData> = [];

  constructor(private employeeService:EmployeeService) { }

  ngOnInit(): void {

    this.employeeService.getAllEmployees()
    .subscribe(data => 
      {
        this.employeeArrayData = data
      });
  }

}

employee-list.component.ts

<br><br><br>
<p-table [value]="employeeArrayData">
    <ng-template pTemplate="header">
        <tr>
            <th>Company Employee Id</th>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Last Name</th>
            <th>Phone Number</th>
            <th>E-mail Id</th>
            <th>Designation</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-employee>
        <tr>
            <td>{{employee.companyEmployeeId}}</td>
            <td>{{employee.empFirstName}}</td>
            <td>{{employee.empMiddleName}}</td>
            <td>{{employee.empLastName}}</td>
            <td>{{employee.empPhoneNumber}}</td>
            <td>{{employee.emailId}}</td>
            <td>{{employee.employeeDesignation}}</td>
        </tr>
    </ng-template>
</p-table>

如果有人需要 app.module.ts、app.component.ts 和 app.component.html

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CoreNavigationModule } from './core-navigation/core-navigation.module';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    CoreNavigationModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(){
  }

  ngOnInit(){
  }

}

app.component.html

<app-core-header></app-core-header>
<app-core-navbar></app-core-navbar>

<app-dashboard></app-dashboard>

<router-outlet></router-outlet>

<app-core-footer></app-core-footer>

请让我知道我在这里缺少哪些导入以及如何进行正确的配置。 PrimeNG 文档对这个错误没有太大帮助。

Answer 1

-I have faced the same issue.
the following worked for me 

1) install the dependent packages like primeNg,primeicons,chart.js, quill,fullcalendar/core

**npm install package name**
npm install chart.js
npm install  quill
npm install @fullcalendar/core


2)In Angular.json in style array add the path of primeng related CSS as below.

 "styles": [
              "src/styles.sass",
              "./node_modules/primeng/resources/themes/nova-light/theme.css",
              "./node_modules/primeng/resources/primeng.min.css",
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/bootstrap/dist/css/bootstrap.css"
            ],

Answer 2

声明 (app.module.ts) 中似乎缺少 EmployeesListComponent。 尝试在此处添加它以及其他可能缺少的组件，这应该可以解决问题。