添加ngb-pagination组件后Angular页面无法加载问题求助

问题排查定位 #

最常见原因：未正确导入分页组件模块 #

ng-bootstrap的所有组件都需要单独导入对应模块才能使用，未导入会导致组件无法识别，页面渲染失败：

1. 如果你的Angular项目使用独立组件（standalone），需要在当前组件的@Component装饰器的imports数组中添加NgbPaginationModule：

import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-table',
  standalone: true,
  // 必须引入CommonModule（用来支持*ngFor等基础指令）和NgbPaginationModule
  imports: [CommonModule, HttpClientModule, NgbPaginationModule],
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
})

2. 如果你的项目使用NgModule组织代码，需要在当前组件所属的模块中导入分页模块：

// your-module.module.ts
import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [TableComponent],
  imports: [CommonModule, NgbPaginationModule],
})
export class YourCustomModule {}

其他可能原因 #

• 版本不匹配：ng-bootstrap对Angular、Bootstrap的版本有严格的对应要求，版本不兼容会导致组件初始化失败，可以核对你安装的三个依赖的版本是否符合对应规则。
• Bootstrap样式未引入：虽然不会直接导致页面崩溃，但会导致分页组件样式异常，需要确认angular.json的styles配置中已经引入了Bootstrap的CSS文件。
• 控制台错误排查：打开浏览器开发者工具的Console面板，错误信息会直接提示根因，如果出现'ngb-pagination' is not a known element类错误，完全可以确定是模块未导入的问题。

你当前的业务代码本身没有问题，users初始是空数组，users.length不会抛出空指针错误，page和pageSize都有初始值，双向绑定逻辑正常，可以排除业务代码的问题。

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