Angular 5服务端渲染报错：element.getBoundingClientRect不是函数

这个问题我太熟悉了！本质是服务端渲染时没有真实的浏览器DOM，getBoundingClientRect是浏览器专属的API，ngx-datatable的DimensionsHelper在服务端调用这个方法就会报错。下面是我亲测有效的解决办法：

1. 确保服务端模块正确提供模拟服务 #

你提到已经在root.module.server.ts加了服务，但可能Angular 5的配置细节没到位。请确认你的server模块里是这样配置的：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
// 引入ngx-datatable的核心服务
import { DimensionsHelper, ScrollbarHelper } from '@swimlane/ngx-datatable';

// 服务端模拟DimensionsHelper，避免调用浏览器API
class ServerDimensionsHelper extends DimensionsHelper {
  getDimensions(element: any) {
    // 返回模拟的尺寸数据，适配服务端环境
    return {
      width: 0,
      height: 0,
      top: 0,
      left: 0,
      bottom: 0,
      right: 0
    };
  }
}

// 模拟ScrollbarHelper的服务端实现
class ServerScrollbarHelper extends ScrollbarHelper {
  getScrollbarWidth() {
    return 0;
  }
}

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [AppComponent],
  providers: [
    { provide: DimensionsHelper, useClass: ServerDimensionsHelper },
    { provide: ScrollbarHelper, useClass: ServerScrollbarHelper }
  ]
})
export class AppServerModule {}

Angular 5中不需要额外的平台判断，直接在server模块里替换掉默认的服务实现即可。

2. 在组件中判断浏览器环境再渲染表格 #

如果上面的方法还是不行，可以在使用datatable的组件里，通过isPlatformBrowser控制只在浏览器环境渲染表格：

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  template: `
    <ng-container *ngIf="isBrowser">
      <ngx-datatable [rows]="yourRows" [columns]="yourColumns"></ngx-datatable>
    </ng-container>
  `
})
export class YourDatatableComponent implements OnInit {
  isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.isBrowser = isPlatformBrowser(this.platformId);
  }

  ngOnInit() {
    // 可选：只有浏览器环境才加载表格数据
    if (this.isBrowser) {
      // 调用你的数据接口获取rows数据
    }
  }
}

这样服务端渲染时会跳过表格的渲染逻辑，避免触发错误，浏览器端则正常显示表格。

3. 检查ngx-datatable版本兼容性 #

Angular 5属于比较老旧的版本，你当前使用的ngx-datatable版本可能和Angular 5不兼容，导致SSR处理逻辑出错。建议确认你的ngx-datatable版本是适配Angular 5的，比如@swimlane/ngx-datatable@11.x.x系列（这个版本专门适配Angular 5），如果版本过高，尝试降级试试。

最后验证 #

部署前本地先运行SSR构建命令验证：

npm run build:ssr
npm run serve:ssr

查看错误是否消失，如果还有问题，可以检查错误栈里的DimensionsHelper.getDimensions调用位置，确认服务端的模拟类是否正确覆盖了默认实现。

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