Angular项目添加ngb-pagination后出现NG0203错误求助

可能的原因及排查步骤 #

1. 确认@ng-bootstrap/ng-bootstrap版本兼容性 #

Angular 19需要匹配对应版本的@ng-bootstrap/ng-bootstrap，目前v18.x版本适配Angular 19。执行以下命令确保版本正确：

npm install @ng-bootstrap/ng-bootstrap@18.x --save

2. 检查模块导入方式 #

确保在组件所在的NgModule或独立组件的imports数组中正确导入NgbPaginationModule，不要仅在根模块导入（针对独立组件场景）：

• NgModule场景：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { YourTableComponent } from './your-table.component';

@NgModule({
  declarations: [YourTableComponent],
  imports: [BrowserModule, NgbPaginationModule]
})
export class YourModule { }

• 独立组件场景：

import { Component } from '@angular/core';
import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-your-table',
  standalone: true,
  imports: [NgbPaginationModule],
  templateUrl: './your-table.component.html'
})
export class YourTableComponent {
  // 组件逻辑
}

3. 避免在非注入上下文使用inject() #

检查组件代码，确保没有在普通方法、属性初始化器中直接调用inject()函数。所有依赖注入必须在构造函数中声明，或在InjectionToken工厂函数、provideXXX工厂内调用inject()。

错误写法示例：

// 错误：属性初始化时调用inject()，不在注入上下文
private someService = inject(SomeService);

正确写法示例：

// 正确：在构造函数中注入依赖
constructor(private someService: SomeService) { }

4. 检查模板中ngb-pagination的使用 #

确保模板中绑定的属性均已在组件类中定义，无未初始化的异常：

<!-- 正确示例 -->
<ngb-pagination [(page)]="currentPage" [pageSize]="pageSize" [collectionSize]="totalItems"></ngb-pagination>

确认currentPage、pageSize、totalItems都是组件类中已声明的有效属性。

5. 清理缓存并重启项目 #

执行以下命令清理缓存，避免旧编译文件干扰：

rm -rf node_modules package-lock.json
npm install
ng build --clean
ng serve

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