atularen / ngx-monaco-editor

Monaco Editor component for Angular 2 and Above
https://www.npmjs.com/package/ngx-monaco-editor
MIT License
428 stars 155 forks source link

Using with Angular universal gives reference error windows is not defined #245

Open nikhilnxvverma1 opened 2 years ago

nikhilnxvverma1 commented 2 years ago

I am using angular universal (v12.2.x) and I have a route that directly renders the ngx-monaco-editor with default configurations. While I can see my editor in the browser just fine, in the terminal I am getting a huge stack trace on the server side telling me that "window is not defined". I am assuming monaco has some bindings with the windows object. The question then becomes how do you make this library work with server side rendering?

Stack Trace: ERROR Error: Uncaught (in promise): ReferenceError: window is not defined ReferenceError: window is not defined at /Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:160605:9 at new ZoneAwarePromise (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:182113:29) at EditorComponent.ngAfterViewInit (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:160602:21) at callHook (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50236:22) at callHooks (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50205:17) at executeInitAndCheckHooks (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50156:9) at refreshView (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:57246:21) at refreshComponent (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:58346:13) at refreshChildComponents (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:56971:9) at refreshView (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:57225:13) at resolvePromise (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:181939:31) at resolvePromise (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:181893:17) at /Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:182005:17 at ZoneDelegate.invokeTask (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:181201:31) at Object.onInvokeTask (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:76370:33) at ZoneDelegate.invokeTask (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:181200:60) at Zone.runTask (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:180973:47) at drainMicroTaskQueue (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:181377:35) at invokeTask (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:181286:21) at Server.ZoneTask.invoke (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:181271:48) { rejection: ReferenceError: window is not defined at /Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:160605:9 at new ZoneAwarePromise (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:182113:29) at EditorComponent.ngAfterViewInit (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:160602:21) at callHook (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50236:22) at callHooks (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50205:17) at executeInitAndCheckHooks (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50156:9) at refreshView (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:57246:21) at refreshComponent (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:58346:13) at refreshChildComponents (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:56971:9) at refreshView (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:57225:13), promise: ZoneAwarePromise [Promise] { __zone_symbol__state: 0, __zone_symbol__value: ReferenceError: window is not defined at /Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:160605:9 at new ZoneAwarePromise (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:182113:29) at EditorComponent.ngAfterViewInit (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:160602:21) at callHook (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50236:22) at callHooks (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50205:17) at executeInitAndCheckHooks (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50156:9) at refreshView (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:57246:21) at refreshComponent (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:58346:13) at refreshChildComponents (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:56971:9) at refreshView (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:57225:13) }, zone: <ref *1> Zone { _parent: Zone { _parent: null, _name: '<root>', _properties: {}, _zoneDelegate: [ZoneDelegate] }, _name: 'angular', _properties: { isAngularZone: true }, _zoneDelegate: <ref *2> ZoneDelegate { _taskCounts: [Object], zone: [Circular *1], _parentDelegate: [ZoneDelegate], _forkZS: null, _forkDlgt: null, _forkCurrZone: null, _interceptZS: null, _interceptDlgt: null, _interceptCurrZone: null, _invokeZS: [Object], _invokeDlgt: [ZoneDelegate], _invokeCurrZone: [Circular *1], _handleErrorZS: [Object], _handleErrorDlgt: [ZoneDelegate], _handleErrorCurrZone: [Circular *1], _scheduleTaskZS: [Object], _scheduleTaskDlgt: [ZoneDelegate], _scheduleTaskCurrZone: [Circular *1], _invokeTaskZS: [Object], _invokeTaskDlgt: [ZoneDelegate], _invokeTaskCurrZone: [Circular *1], _cancelTaskZS: [Object], _cancelTaskDlgt: [ZoneDelegate], _cancelTaskCurrZone: [Circular *1], _hasTaskZS: [Object], _hasTaskDlgt: [ZoneDelegate], _hasTaskDlgtOwner: [Circular *2], _hasTaskCurrZone: [Circular *1] } }, task: ZoneTask { _zone: <ref *1> Zone { _parent: [Zone], _name: 'angular', _properties: [Object], _zoneDelegate: [ZoneDelegate] }, runCount: 0, _zoneDelegates: null, _state: 'notScheduled', type: 'microTask', source: 'Promise.then', data: ZoneAwarePromise [Promise] { __zone_symbol__state: 0, __zone_symbol__value: ReferenceError: window is not defined at /Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:160605:9 at new ZoneAwarePromise (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:182113:29) at EditorComponent.ngAfterViewInit (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:160602:21) at callHook (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50236:22) at callHooks (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50205:17) at executeInitAndCheckHooks (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:50156:9) at refreshView (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:57246:21) at refreshComponent (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:58346:13) at refreshChildComponents (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:56971:9) at refreshView (/Users/nikhilverma/Desktop/stringish-website/dist/stringish-website/server/main.js:57225:13) }, scheduleFn: undefined, cancelFn: undefined, callback: [Function (anonymous)], invoke: [Function (anonymous)] } }

nikhilnxvverma1 commented 2 years ago

According to this discussion,monaco editor does not support server side rendering. If anyone else has any thoughts on this I would love to know.