部署Angular Universal运行node dist/server.js时遇NotYetImplemented错误

嘿，这个报错我熟！本质是你的Angular应用在SSR（服务器端渲染）时，用到了依赖浏览器HTMLCanvasElement的功能——比如图表库（ECharts/Chart.js）、图像处理工具这类，但Node.js服务器环境根本没有浏览器的Canvas API，所以就抛出了这个「功能未实现」的错误。

下面给你几个靠谱的解决办法，按优先级排序：

1. 用domino模拟浏览器DOM环境（最通用） #

domino能在Node里模拟一套完整的浏览器DOM环境，包括Canvas，步骤很简单：

• 先装依赖：

  npm install domino --save-dev
  

• 找到你的SSR入口文件server.ts，在所有其他导入之前加这段代码：

  import * as domino from 'domino';
  // 创建一个模拟的浏览器window对象
  const win = domino.createWindow('');
  // 把必要的浏览器全局对象挂载到Node环境里
  global['window'] = win;
  global['document'] = win.document;
  global['HTMLCanvasElement'] = win.HTMLCanvasElement;
  global['Image'] = win.Image;
  

• 重新构建生产包：

  ng build --configuration production
  ng run your-app-name:server:production
  

• 再跑node dist/server.js，大概率就能解决问题了。

2. 给特定库做SSR兼容（更轻量） #

如果明确是某个库（比如ECharts）导致的，那可以直接让这个库只在浏览器环境运行，服务器端跳过：

• 在用到该库的组件里，用Angular的isPlatformBrowser判断环境：

  import { isPlatformBrowser } from '@angular/common';
  import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
  // 假设你用的是ECharts
  import * as echarts from 'echarts';
  
  @Component({
    selector: 'app-dashboard-chart',
    templateUrl: './dashboard-chart.component.html'
  })
  export class DashboardChartComponent implements OnInit {
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
    ngOnInit(): void {
      // 只有在浏览器里才初始化图表
      if (isPlatformBrowser(this.platformId)) {
        const chartDom = document.getElementById('main-chart');
        const myChart = echarts.init(chartDom);
        // 后续的图表配置代码...
      }
    }
  }
  

• 这种方式能减少SSR的不必要加载，性能更好。

3. 用Node版Canvas包兜底 #

如果domino模拟的Canvas不够用（比如需要更复杂的绘图功能），可以直接用Node官方支持的Canvas实现：

• 安装依赖：

  npm install canvas --save-dev
  

• 在server.ts里添加：

  import { createCanvas } from 'canvas';
  global['HTMLCanvasElement'] = createCanvas().constructor;
  

• 重新构建后启动服务器即可。

额外提醒 #

• 如果你用的是Angular 14及以上版本，一定要确保模拟环境的代码放在所有其他导入语句之前，不然可能会因为加载顺序问题失效。
• 检查下你的Angular和Angular Universal依赖版本是否匹配，版本不兼容也可能触发奇怪的报错。

内容的提问来源于stack exchange，提问作者Raphaël VO