Angular11使用NgxPaginationModule实现表格分页报NG0203注入错误

以下按问题出现概率从高到低给出排查修复步骤：

1. 未正确在所属模块导入NgxPaginationModule #

这是该错误最常见的诱因：仅安装了依赖包、在组件模板中使用了分页管道，但没有将模块注册到组件所属的NgModule中。
修复操作：

• 找到DelCardComponent声明所在的模块文件，通常为根模块app.module.ts，如果做了模块拆分则找对应声明组件的子特性模块
• 在文件顶部添加模块导入语句：

import { NgxPaginationModule } from 'ngx-pagination';

• 在模块装饰器的imports数组中加入该模块，参考示例：

@NgModule({
  declarations: [
    DelCardComponent,
    // 其他已声明的组件、指令
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgxPaginationModule, // 必须添加到该数组
    // 其他已导入的业务模块、官方模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意：如果组件在子特性模块中声明，必须将NgxPaginationModule导入到对应子模块，仅在根模块导入且未做全局导出时，子模块无法使用该分页模块。

2. 依赖版本不兼容 #

Angular 11 与ngx-pagination的兼容版本为6.x系列，如果安装了8.x/9.x等高版本，会因依赖的Angular核心API版本不匹配触发注入上下文错误。
修复操作：
执行以下命令重装对应版本依赖：

# 先卸载现有错误版本
npm uninstall ngx-pagination
# 安装兼容Angular11的版本
npm install ngx-pagination@6.0.0 --save

依赖安装完成后，完全终止本地ng serve进程，重新启动服务，不要依赖热更新加载变更。

3. 现有分页逻辑缺陷修复 #

解决注入错误后，还需要修正现有代码的逻辑问题，否则分页无法正常工作：

• 你当前配置中totalItems写死为4，实际总条数需要和接口返回的列表长度对齐，修改refreshCardList方法：

refreshCardList(){
  this.service.getCardList().subscribe(data =>{
    this.CardList=data;
    // 动态更新分页总条数
    this.config.totalItems = data.length;
  });
}

• 你的模板中只加了分页管道，没有添加页码切换控件，在表格闭合标签</table>后添加分页组件即可显示页码切换栏：

<pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>

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