angular - 角度通用的窗口未定义错误| 角 10 | ng 10
问题描述
我在我的项目中添加了角度通用但在服务时我得到错误窗口未定义
E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:276225 Lf.display.hideContentCards=Mf.$e;Lf.display.toggleContentCards=Mf.Dh;Y.display=Mf;return appboyInterface});}).call(window);
^
ReferenceError: window is not defined
at Object.opb8 (E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:276225:117)
at __webpack_require__ (E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:26:30)
at Module.OY7K (E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:177169:72)
at __webpack_require__ (E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:26:30)
at Module.Y9WU (E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:206001:83)
at __webpack_require__ (E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:26:30)
at Module.F9ae (E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:110830:86)
at __webpack_require__ (E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:26:30)
at Module.vY5A (E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:296159:78)
at __webpack_require__ (E:\code\collective\v2\collective-web-ui\dist\collective-web-ui\server\main.js:26:30)
A server error has occurred. node exited with 1 code. connect ECONNREFUSED 127.0.0.1:58906 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! collective-web-ui@2.0.0 dev:ssr: `ng run collective-web-ui:serve-ssr` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the collective-web-ui@2.0.0 dev:ssr script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\sushil_kumar\AppData\Roaming\npm-cache\_logs\2021-07-19T05_51_29_859Z-debug.log
我已经尝试了这里提供的所有解决方案https://github.com/angular/universal/blob/master/docs/gotchas.md 但没有一个在我的项目中有效，但我已经在一个演示项目中测试了这些解决方案。
我无法在我的项目中找到问题所在，或者由于某些依赖项而可能出错这里是我的依赖项
"dependencies": {
"@agm/core": "^3.0.0-beta.0",
"@agm/snazzy-info-window": "^3.0.0-beta.0",
"@angular-slider/ngx-slider": "^2.0.3",
"@angular/animations": "10.2.4",
"@angular/cdk": "10.2.7",
"@angular/common": "10.2.4",
"@angular/compiler": "10.2.4",
"@angular/core": "10.2.4",
"@angular/forms": "10.2.4",
"@angular/localize": "~10.2.4",
"@angular/material": "10.2.7",
"@angular/platform-browser": "10.2.4",
"@angular/platform-browser-dynamic": "10.2.4",
"@angular/platform-server": "10.2.4",
"@angular/router": "10.2.4",
"@angular/youtube-player": "^10.2.7",
"@braze/web-sdk": "^3.3.0",
"@cloudinary/angular-5.x": "^1.4.2",
"@collective/booking": "1.0.2",
"@fancyapps/fancybox": "^3.5.7",
"@fullcalendar/angular": "^5.7.0",
"@fullcalendar/core": "^5.7.0",
"@fullcalendar/daygrid": "^5.7.0",
"@fullcalendar/interaction": "^5.7.0",
"@fullcalendar/list": "^5.7.0",
"@fullcalendar/moment": "^5.7.0",
"@fullcalendar/resource-timegrid": "^5.7.0",
"@fullcalendar/scrollgrid": "^5.7.0",
"@fullcalendar/timegrid": "^5.7.0",
"@ng-bootstrap/ng-bootstrap": "^9.1.0",
"@ngneat/cashew": "^1.3.2",
"@ngrx/effects": "^10.1.2",
"@ngrx/store": "^10.1.2",
"@ngrx/store-devtools": "^10.1.2",
"@nguniversal/express-engine": "^10.1.0",
"@ngx-formly/core": "5.10.15",
"@ngx-lite/json-ld": "0.6.3",
"@ngx-meta/core": "9.0.0",
"@ntegral/ngx-universal-window": "^1.0.2",
"@service-work/is-loading": "5.1.2",
"@typeform/embed": "^0.7.0",
"@types/mixpanel-browser": "^2.35.7",
"@types/qs": "^6.9.6",
"@vimeo/player": "^2.15.3",
"ag-grid-angular": "^25.1.0",
"ag-grid-community": "^25.1.0",
"angular-dplayer": "^1.0.8",
"angular2-recaptcha": "^1.1.0",
"angulartics2": "^10.0.0",
"bootstrap": "^4.4.1",
"cloudinary-core": "^2.11.4",
"compressorjs": "^1.0.5",
"core-js": "^2.6.11",
"datebook": "6.5.0",
"dplayer": "^1.26.0",
"express": "^4.15.2",
"handlebars": "^4.7.3",
"hls.js": "^0.14.17",
"jquery": "^3.4.1",
"jquery-sortable": "^0.9.13",
"lottie-web": "^5.7.8",
"material-icons": "^0.3.1",
"medium-editor": "^5.23.3",
"medium-editor-insert-plugin": "^2.5.1",
"mixpanel-browser": "^2.40.1",
"moment": "2.24.0",
"moment-timezone": "0.5.27",
"mydatepicker": "^9.0.2",
"ng-dynamic-component": "^7.0.0",
"ng-recaptcha3": "^1.3.2",
"ng2-animate-on-scroll": "^2.1.0",
"ng2-cookies": "^1.0.12",
"ngx-bootstrap": "5.1.1",
"ngx-connection-service": "^7.0.3",
"ngx-daterange": "^1.0.43",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-image-cropper": "^3.0.0",
"ngx-infinite-scroll": "^8.0.1",
"ngx-lightbox": "^2.4.1",
"ngx-lottie": "^6.4.0",
"ngx-monaco-editor": "^8.1.1",
"ngx-useful-swiper": "10.0.1",
"node-sass": "^4.13.0",
"qs": "^6.10.1",
"reflect-metadata": "^0.1.13",
"rgzoom": "0.0.37",
"rxjs": "^6.6.7",
"save": "^2.4.0",
"snazzy-info-window": "^1.1.1",
"sso-sdk": "^3.0.3",
"swiper": "6.5.6",
"textarea-caret": "^3.1.0",
"tslib": "2.2.0",
"yt-player": "~3.4.3",
"yt-player-angular": "5.0.1",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1002.3",
"@angular/cli": "10.2.3",
"@angular/compiler-cli": "10.2.4",
"@angular/language-service": "~10.2.4",
"@nguniversal/builders": "^10.1.0",
"@types/express": "^4.17.0",
"@types/jasmine": "^2.8.18",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^12.20.7",
"@types/swiper": "^5.4.3",
"codelyzer": "^6.0.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "4.0.7",
"vrsource-tslint-rules": "^6.0.0"
}
服务器.ts 文件
// const MockBrowser = require('mock-browser').mocks.MockBrowser;
// const mock = new MockBrowser();
// global['document'] = mock.getDocument();
// global['window'] = mock.getWindow();
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
// globalThis.WebSocket = require('ws');
// globalThis.XMLHttpRequest = require('xhr2');
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const distFolder = join(process.cwd(), 'dist/collective-web-ui/browser');
console.log('distFolder', distFolder);
const template = fs.readFileSync(path.join(distFolder, 'index.html')).toString();
const win = domino.createWindow(template.toString());
global['window'] = win;
global['document'] = win.document;
global['self'] = win
global['IDBIndex'] = win.IDBIndex
global['document'] = win.document
global['navigator'] = win.navigator
global['getComputedStyle'] = win.getComputedStyle;
// globalThis.window = win;
// globalThis.document = win.document;
// globalThis.self = win
// globalThis.IDBIndex = win.IDBIndex
// globalThis.document = win.document
// globalThis.navigator = win.navigator
// globalThis.getComputedStyle = win.getComputedStyle;
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
import { applyDomino } from '@ntegral/ngx-universal-window';
const BROWSER_DIR = join(process.cwd(), 'dist/collective-web-ui/browser');
applyDomino(global, join(BROWSER_DIR, 'index.html'));
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/collective-web-ui/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
// 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);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// 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 './main.server';
解决方案
推荐阅读
- java - 如何使用 Java + Selenium WebDriver 保存和加载所有 cookie
- python - 从 Numpy 数组中选择每列满足某些条件的所有行
- javascript - 如何从 AWS Auth.currentSession() 返回的 Promise 中获取返回值
- r - 变量 R 的所有可能组合
- aws-organizations - awsorganization 尝试从仅修订版可用帐户创建 iam 用户失败
- laravel - 反映后，我想在表单页面中显示更改
- apache-spark - PySpark：从查找表中选择值进行计算
- javascript - 多行输出，多个变量使用innerHTML
- javascript - 无法读取未定义 ts-node esm 的属性“文本”
- latex - 在进行数组时，有没有办法在 Latex 中用插入数字的单词来标记方程式？