Angular Universal (SSR) and Ckeditor 4 error

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

gorniv gorniv · Accepted Answer · 2019-01-14T07:46:43

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"
                }
              ]
            },
...

Angular Universal (SSR) and Ckeditor 4 error

1 Answers