Angular 17 standalone application integrate CKEditor 5 -- Error: window is not defined

My Angular (version 17.1.2 and standalone) app can not integrate CKEditor. I have followed the step by step guide here.

Error:

[vite] Internal server error: window is not defined
      at r (d:/Study/Nam3_HK3/DoAn/bookmanagement/fiction-management-fe/node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js:1:12102)
      at __require2 (D:/Study/Nam3_HK3/DoAn/bookmanagement/fiction-management-fe/.angular/vite-root/fiction-management-fe/chunk-ZLOYPDTO.mjs:51:50)
      at eval (d:/Study/Nam3_HK3/DoAn/bookmanagement/fiction-management-fe/src/app/component/admin-chapter-feature/admin-chapter-feature.component.ts:8:32)
      at async instantiateModule (file:///D:/Study/Nam3_HK3/DoAn/bookmanagement/fiction-management-fe/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9) (x3)

Here is my code:

import { CommonModule} from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'app-admin-chapter-feature',
  standalone: true,
  imports: [
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    CKEditorModule,
    CommonModule,
  ],
  templateUrl: './admin-chapter-feature.component.html',
  styleUrl: './admin-chapter-feature.component.css',
})
export class AdminChapterFeatureComponent {
  public Editor = ClassicEditor;

  public onReady(editor: any) {
    console.log("CKEditor5 Angular Component is ready to use!", editor);
  }
  public onChange({ editor }: ChangeEvent) {
    const data = editor.getData();
    console.log(data);
  }
}

<h2>CHAPTER MANAGEMENT</h2>
<div class="wrapper-chapter">
  <form class="example-form">
    <mat-form-field class="example-full-width">
      <mat-label>Chapter name</mat-label>
      <input matInput placeholder="" />
    </mat-form-field>

    <mat-form-field class="example-full-width">
      <mat-label>Chapter content</mat-label>
      <textarea matInput placeholder=""></textarea>
    </mat-form-field>

    <ckeditor
    [editor]="Editor"
    data="<p>Hello from CKEditor5!</p>"
    (ready)="onReady($event)"
    (change)="onChange($event)"
    >
  </ckeditor>
  </form>
</div>

File typings.d.ts:

declare module '@ckeditor/ckeditor5-build-classic' {
  const ClassicEditorBuild: any;
  export = ClassicEditorBuild;
}

My package.json:

"@ckeditor/ckeditor5-angular": "^7.0.1",
"@ckeditor/ckeditor5-build-classic": "^41.2.1",
"@ckeditor/ckeditor5-core": "^41.2.1",
"@ckeditor/ckeditor5-engine": "^41.2.1",
"@ckeditor/ckeditor5-utils": "^41.2.1",
"@ckeditor/ckeditor5-watchdog": "^41.2.1",

Issue is related to SSR. If you setup your Angular app to use server side rendering this will cause the error for CKEditor. Disable it via the anglar.json config file it should then work.

"ssr": false,
"prerender": false 

You can also fix the SSR issue by checking for the existance of the window object before initializing the Editor = ClassicEditor. Use the isPlatformBrowser from @angular/common.