ganatan / angular-app

Angular 18 Fullstack Application: SSR, PWA, SEO, and Scalable Node.js Typescript & Javascript Backend with MySQL, PostgreSQL, MongoDB
713 stars 340 forks source link

ReferenceError: window is not defined for https://angular.ganatan.com/leaflet #3

Open RomainMarecat opened 4 years ago

RomainMarecat commented 4 years ago

I had problems with leaflet module to build correctly in SSR. Apparently, you had too.

ReferenceError: window is not defined

window isn't here in SSR, but leaflet try to implements some functions directly in source.

var requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || timeoutDefer;
var cancelFn = window.cancelAnimationFrame || getPrefixed('CancelAnimationFrame') ||
        getPrefixed('CancelRequestAnimationFrame') || function (id) { window.clearTimeout(id); }; 

I followed https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts. They had global variable for mock every missing browser global variables.

I try to add L global from custom leaflet.js where i modify some functions

server.ts

const domino = require('domino');

const template = readFileSync(join('.', 'dist', 'index.html')).toString();

// for mock global window by domino

const win = domino.createWindow(template);

global['window'] = win;

global['L'] = L;

But i had always the same issue window isn't defined because LeafletModule import L from leaflet import * as L from 'leaflet';

How would you proceed to clean this leaflet?