window is not defined #830
Comments
|
"window is not defined" came from 3rd party library which accessing window variable. You should wrapping your code with browser check condition In html, In ts, |
|
Just want to jump in here and say that I had 'hammerjs' imported for Material2 and that was what was giving this issue, removing that (or adding checks for when its in browser) fixed this |
|
@kenji-1996 Good point. the best way to support material2 with ssr is import hammerjs in main.ts Material guide already said hammerjs should be imported from main.ts (not polyfills.ts or app.module)
|
|
I'd like to join in with a question as well: The blog post about the Angular 5.0 release states that it comes with Mozilla's domino, quote:
Can domino somehow be used to provide a "fake" window when rendering on the server? |
|
Domino is just for the DOM specifically, the window is separate from this. |
|
You can fix const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;look: https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts |
|
@Gorniv |
|
@Ks89 in https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts line 94: |
|
this may or may not help someone so ill post in case it does. i had some strange issues when using
const domino = require('@angular/platform-server/node_modules/domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(getTemplatesPath(), 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
global['MutationObserver'] = getMockMutationObserver();
function getMockMutationObserver() {
return class {
observe(node, options) {
}
disconnect() {
}
takeRecords() {
return [];
}
};
}not entirely sure why the two references were different but there you go |
|
SOLVED: It was NgxStore dependency if anyone gets the same issue This fixed my window issue but now I am geting the following..: This is within the server.js file generated from the webpack command. Which is also generating a 1.js file in the same folder as server.js. Webpack version: 5.6.0 package.json Anyone have any ideas as to why? |
|
To anyone recommending to have the browser get mocked with lines like... import { createWindow } from 'domino';
const win: any = createWindow(template);
global['document'] = win.document;there may be unexpected effects that break server side rendering. I've just spent many many hours tracking down a server side prerendering bug with the AngularFire2 Database Observable not emiting anything at all. Since it the Observable was working with ng serve --prod, I was focused on either the webpack traspilation process or a possible firewall on websocket for node. Although for some reason uncommenting out the line: global['document'] = win.document;allowed the angularfire2 observable to emit properly again. I'm not sure why it does this, but I felt it was important to point this out if anyone relies on angularfire2 observables emiting data for server side rendering. |
|
I am using Asp .net core 2.1 with angular 6.1.2 server side rendering. But my issue is that When ever i add Routing to my angular app it gives me error "window not defined" while rendering the page on server side. |
|
I have given up for using domino to mock window object. Since I got dozen of errors saying "Not implement yet". |
|
The issue for me has been resolved by downgrading the angular. In angular 6.0.1 beta 9 they intruduced a feature scroll restore for router in that they are using window in the function line i gave in my error stack. They use window inspite of it being on server. So i downgraded to 6.0 and the issue was resolved for me |
|
I have an issue
does anyone know how to solve this problem. thanks. |
|
@nimatullah You should put before |
|
Anyone knows what is the performance impact of using domino ? |
|
@Caperious Domino is currently the fastest DOM available |
This is not working |
Here I solved this error in my side adding this code to server.ts |
|
Hi, |
|
@Temkit @RahulGuptaIIITA Did you all figure this out? I've been stuck on this with Ionic 4 / Angular 8/ Firebase through angular/fire. |
ghost
mentioned this issue
this way helped me with angular 8 and the webpack build. All is working fine with this solution... BUT after upgrading to Angular 9 including Angular Universal, Angular CLI (and much more) and using the new Build-Tool Ivy, i am getting window is not defined again. could anyone help me out? My Server.ts is looking like this: EDITED: |
|
this issue delaying our production release by week now, anyone might have encountered on angular 10 (we have implemented domino and tried all sorts of placements of configurations) |
|
I've created an npm package that you can add to your Angular Universal projects that will address this issue by adding only two lines of code to you server.ts file. Check it out at https://www.npmjs.com/package/@ntegral/ngx-universal-window , Hope this helps. |
|
okay i got similar error, i have tried @Gorniv solution, also @ntegral solution but none is working. here is my error: C:\Angular\myWeb\dist\myWeb\server\main.js:1
!function(e,a){for(var i in a)e[i]=a[i]}(exports,function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object
ReferenceError: window is not defined
at Object.1qIE (C:\Angular\myWeb\dist\myWeb\server\main.js:1:157688)
at __webpack_require__ (C:\Angular\myWeb\dist\myWeb\server\main.js:1:295)
at Module.uj+Y (C:\Angular\myWeb\dist\myWeb\server\main.js:1:5099002)
at __webpack_require__ (C:\Angular\myWeb\dist\myWeb\server\main.js:1:295)
at Object.0 (C:\Angular\myWeb\dist\myWeb\server\main.js:1:50084)
at __webpack_require__ (C:\Angular\myWeb\dist\myWeb\server\main.js:1:295)
at +T3u (C:\Angular\myWeb\dist\myWeb\server\main.js:1:1624)
at Object. (C:\Angular\myWeb\dist\myWeb\server\main.js:1:1669)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
anyone same issue ? Edit: even after i downgrade angular to version 9.0.7 the error still persist, this is stressed me out. const distFolder = join(process.cwd(), 'dist/myWeb/browser'); const template = fs.readFileSync(path.join(distFolder, 'dist','index.html')).toString(); //dist/myWeb/browser/dist/index.html it should be like this: const distFolder = join(process.cwd(), 'dist/myWeb/browser'); const template = fs.readFileSync(path.join(distFolder, 'index.html')).toString(); //dist/myWeb/browser/index.html because the template was wrong, it's affect this line of code const win = domino.createWindow(template); i guess that's why my mock window is not working and keep throwing window is not defined |
|
Looks like I'm not the only one who has noticed regression after upgrading to Is it maybe related to the fact that |
|
I've found a workaround to fix the issue by adding For more info: https://angular.io/guide/migration-update-module-and-target-compiler-options |
|
@wattachai you are a life saver, I finally got it working on Angular 11 with Ivy (I had a problem using firebaseui, which depends on the window). Two main points for anyone stumbling on this:
Here's my package.json, tsconfig.server.ts and server.ts for who may need a reference package.json tsconfig.server.ts server.ts |
|
With the latest answers, I've had Later, Apparently, the I've also simplified this part into It left me with the whole code as lean as possible All in Many thanks for contribution to fixing such an irritating error. PS. Works fine on |
|
@danieldanielecki @michelepatrassi, after several hours and tests done, I almost gave up, but thanks to your answers I was able to compile my project in Angular Universal. this is my config:
|
|
I am glad to hear that!! :) |
|
nebular needs to fix this, domino is not a valid option as the package itself is HUGE and SLOW! |
|
Window is not defined Angular universal |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
and others
Do you want to request a feature or report a bug?
bug
What is the current behavior?
I followed this tutorial:
https://github.com/angular/angular-cli/wiki/stories-universal-rendering
used node
dist/server.jsand got this message as expected:but when I'm trying to access my localhost:4000 I get this in the console:
What is the expected behavior?
Should access my angular project instead throwing an error
What is the motivation / use case for changing the behavior?
bug fix
Please tell us about your environment:
The text was updated successfully, but these errors were encountered: