Angular Universal(SSR)集成ng2-ckeditor时出现CKEditor 4.x缺失错误

这个错误的核心原因很明确：Angular Universal在服务器端渲染时运行在Node.js环境中，没有浏览器的window对象和DOM环境，而ng2-ckeditor依赖客户端的CKEditor 4.x库，服务器端无法找到它，所以反复抛出这个错误。下面是几个经过验证的解决方案：

方案一：基于平台环境的条件渲染与动态导入 #

只在浏览器环境下加载和渲染CKEditor组件，服务器端完全跳过它：

1. 在你的CKEditor封装组件中，注入PLATFORM_ID并判断当前环境：

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

@Component({
  selector: 'app-my-ckeditor',
  template: `
    <!-- 只有浏览器环境才渲染CKEditor -->
    <ng-container *ngIf="isBrowser">
      <ckeditor [(ngModel)]="editorContent" [config]="editorConfig"></ckeditor>
    </ng-container>
  `
})
export class MyCkeditorComponent {
  isBrowser: boolean;
  editorContent = '';
  editorConfig = {
    toolbar: ['Bold', 'Italic', 'Underline'] // 自定义你的编辑器配置
  };

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

2. 如果你是通过模块导入ng2-ckeditor，也可以在AppModule中只在浏览器环境导入它，服务器端模块（AppServerModule）不导入：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from 'ng2-ckeditor';
import { MyCkeditorComponent } from './my-ckeditor.component';

@NgModule({
  imports: [BrowserModule, CKEditorModule],
  declarations: [MyCkeditorComponent]
})
export class AppModule {}

// app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

方案二：服务器端替换CKEditor组件 #

在服务器端渲染时，用一个空组件替代真实的CKEditor组件，避免服务器端尝试初始化它：

1. 创建一个空的服务器端CKEditor组件：

import { Component } from '@angular/core';

@Component({
  selector: 'ckeditor',
  template: '' // 空模板，服务器端不渲染任何内容
})
export class ServerCkeditorComponent {}

2. 在AppServerModule中声明这个空组件，并替换掉ng2-ckeditor的原始组件：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ServerCkeditorComponent } from './server-ckeditor.component';
import { CkeditorComponent } from 'ng2-ckeditor';

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent],
  declarations: [ServerCkeditorComponent],
  providers: [
    { provide: CkeditorComponent, useClass: ServerCkeditorComponent }
  ]
})
export class AppServerModule {}

方案三：确保CKEditor资源仅在客户端加载 #

如果你是通过脚本引入CKEditor库，要确保它只在客户端的构建配置中添加：

在angular.json中，给客户端构建添加CKEditor脚本，服务器端构建不添加：

"architect": {
  "build": {
    "options": {
      "scripts": [
        "node_modules/ckeditor4/ckeditor.js" // 客户端加载CKEditor
      ]
    }
  },
  "server": {
    "options": {
      "scripts": [] // 服务器端不加载CKEditor脚本
    }
  }
}

以上方案任选其一都能解决这个问题，核心思路就是让服务器端完全避开依赖浏览器环境的CKEditor组件与库，只在客户端环境中初始化和渲染它。

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