Dalam artikel ini, saya akan membahas cara mengatasi error ReferenceError: window is not defined ketika menggunakan Angular 9 dengan Server-Side Rendering (SSR). Kami akan membahas bagaimana cara setting global['window'] agar komponen dan library Angular dapat mengaksesnya dalam SSR.

Latar Belakang

Sebelum kita mulai, mari kita lihat latar belakang. Pada tahun 2020, saya menemukan error ReferenceError: window is not defined ketika menggunakan Angular 9 dengan SSR. Error ini terjadi karena global['window'] tidak di-definisikan secara tepat.

Penggunaan Domino

Untuk mengatasi error tersebut, saya menggunakan paket Domino. Domino adalah paket yang dapat membantu kita untuk memantau API DOM dan CSS dalam proses rendering server-side. Saya instalasi Domino dengan perintah berikut:

npm install domino --save

Pengaturan global['window']

Kemudian, saya menambahkan kode berikut ke file server.ts:

const domino = require('domino');
const fs = require('fs');
const path = require('path');

// Use the browser index.html as a template for the mock window
const template = fs.readFileSync(path.join(process.cwd(), 'dist/browser', 'index.html')).toString();

// Shim for the global window and document objects.
const window = domino.createWindow(template);
global['window'] = window;
global['document'] = window.document;

Dalam kode di atas, saya menggunakan fungsi domino.createWindow untuk membuat mock window dan mengaturnya sebagai global['window']. Saya juga menetapkan global['document'] dengan menggunakan objek window.document.

Penggunaan AppServerModule

Namun, saya tidak cukup hanya dengan menentukan global['window']. Saya harus memastikan bahwa import AppServerModule dari file main.server.ts terletak setelah pengaturan global['window']. Kode seperti berikut:

import { AppServerModule } from './src/main.server';

Dengan demikian, saya dapat mengakses API DOM dan CSS dalam proses rendering server-side.

Kesimpulan

Dalam artikel ini, saya menunjukkan cara mengatasi error ReferenceError: window is not defined ketika menggunakan Angular 9 dengan SSR. Saya menggunakan paket Domino untuk memantau API DOM dan CSS, serta mengatur global['window'] secara tepat dengan import AppServerModule. Dengan demikian, saya dapat mengakses komponen dan library Angular dalam proses rendering server-side.

Sumber

• Domino documentation
• Angular Universal issues #1678