this.debug is not a function Angular Universal

user_14499780 0
Viewed 2991

I'm applying SSR in my project by using Angular 10.

I've found that lot of people recommend using domino.

Below is my server.ts file

...

import { existsSync, readFileSync } from 'fs';
import { createWindow } from 'domino';

const scripts = readFileSync('dist/video-website-angular/browser/index.html').toString();

const window = createWindow(scripts);
global['window'] = window;

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';

...

When I run npm run dev:ssr, I get the error

angular-universal angular10 angular server-side-rendering express
1 Answers

Actually this.debug is not a function error is just a side effect. The actual error is the first one:

enter image description here

In order to fix it, you need to declare window as any, like this:

const window: any = createWindow(scripts);

// or via a cast

const window = createWindow(scripts) as any;

There is also another approach, that I like least since it practically make the TS code behave like JS, and cut all the typing and code hints support, but here it goes:

(global as any).window = window;
(global as any).document = window.document;
(global as any).Event = window.Event;
(global as any).KeyboardEvent = window.KeyboardEvent;

Either of these should fix your issue.

user_57805360
Related