ganatan / angular-app

Angular 18 ,Bootstrap 5, Node.js, Express.js, CRUD, PWA, SSR, SEO, Lazy Loading, Examples Angular & React nrwl
647 stars 315 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?