-
Notifications
You must be signed in to change notification settings - Fork 483
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
ReferenceError: window is not defined #1678
Comments
To use that workaround it has to appear before It may not solve your problem though as |
@jasonburrows your hint worked for me! Thanks! |
Thank you @jasonburrows, closing. |
Can anyone post the solution? |
I think I have tried all the implementations on the internet to resolve window not defined issues ssr and third party libraries in this instance keycloak-js and unfortunately nothing seems to work using of domino regardless where I place implementations before Project needs keycloak and ssr it is an omni channel solution which must implement SSO and enable SEO. Details below. environment Angular CLI: 10.0.3
Node: 12.18.2
OS: darwin x64
Angular: 10.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.3
@angular-devkit/build-angular 0.1000.3
@angular-devkit/build-optimizer 0.1000.3
@angular-devkit/build-webpack 0.1000.3
@angular-devkit/core 10.0.2
@angular-devkit/schematics 10.0.3
@angular/cli 10.0.3
@ngtools/webpack 10.0.3
@nguniversal/builders 10.0.1
@nguniversal/common 10.0.1
@nguniversal/express-engine 10.0.1
@schematics/angular 10.0.3
@schematics/update 0.1000.3
rxjs 6.5.5
typescript 3.9.7
webpack 4.43.0 //SSR Dom errors polyfile and work around
const domino = require('domino');
import "localstorage-polyfill";
//angular/express
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { existsSync, readFileSync } from 'fs';
const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index.html';
//SSR Dom errors polyfile and work around
const template = readFileSync(join(distFolder, indexHtml)).toString();
const window = domino.createWindow(template);
(global as any).window = window;
(global as any).document = window.document;
(global as any).Event = window.Event;
(global as any).KeyboardEvent = window.KeyboardEvent;
(global as any).MouseEvent = window.MouseEvent;
(global as any).FocusEvent = window.FocusEvent;
(global as any).PointerEvent = window.PointerEvent;
(global as any).HTMLElement = window.HTMLElement;
(global as any).HTMLElement.prototype.getBoundingClientRect = () => {
return {
left: '',
right: '',
top: '',
bottom: ''
};
};
// xmlhttprequest
// (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
(global as any).navigator = window.navigator;
(global as any).localStorage = window.localStorage;
(global as any).DOMTokenList = window.DOMTokenList;
Object.defineProperty(window.document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true,
};
},
});
(global as any).CSS = null;
(global as any).Prism = null;
//SSR Dom errors polyfile and work around
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { createProxyMiddleware, Filter, Options, RequestHandler } from 'http-proxy-middleware';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
return server;
}
function run(): void {
const port = process.env.PORT || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';
error Compiled successfully. /server/main.js:129404
})(window, function (sha256_imported, base64js_imported) {
^
ReferenceError: window is not defined
at Object../node_modules/keycloak-js/dist/keycloak.js |
Try with keycloak-angular insted of keycloak-js npm package. It may be solve your problem. |
I am using keycloak-angular issue reported with no luck on fix, apparently some claim work arounds above work with angular 8,9 issues/263 "keycloak-angular": "^7.3.1",
"keycloak-js": "^10.0.2", |
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. |
馃悶 Bug report
What modules are related to this issue?
Is this a regression?
No
Description
I was trying to add Angular Universal to our project but, when I use
npm run dev:ssr
I get the error metioned on the title, here's the entire message:I tried adding the following code to server.ts, as suggested in another thread of this exact problem, however, this did not work:
After this, I really don't know what to do now, so I come here for help.
Since this is my first time posting here, please tell me if you need something else added.
馃敩 Minimal Reproduction
Running
npm run server:ssr
prompts the error.馃實 Your Environment
The text was updated successfully, but these errors were encountered: