Angular Universal（SSR）和Ckeditor 4错误

Question

I used angular universal for SSR my web app. inside some component I used ng2-ckeditor. when I compile webpack and build server.js file and then run node server.js, the below error show multiple:

    CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)
CKEditor 4.x is missing (http://ckeditor.com/)

how can I solve this problem? thanks for your favor

Answer 1

Use a mock module for CKEdotor. You can look sample:

• different import for browser and server. mock-server-browser.module.ts

@NgModule({
  imports: [
    CommonModule,
    MockServerBrowserRoutes,
    environment.isServer ? [MockServerModule] : [MockBrowserModule],
    TranslateModule,
  ],
  declarations: [MockServerBrowserComponent],
})

• enviroment

export const environment = {
  production: false,
  isServer: false,
  // for prerender
  host: 'http://localhost:4000',
};

• angular.json different config for server and browser

...
 "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "dev": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/server/environment.ts"
                }
              ]
            },
...