我正在使用 Angular 7 和 Angular Universal 制作 SSR,但是当我使用第三方的 Fusioncharts 时,我在运行此脚本时遇到了此错误
npm run build:ssr && npm run serve:ssr
ReferenceError: window is not defined
at Object.undefined.module.exports.module.exports (C:\Users\ridho.fauzan\Documents\angular-app\bizhare-frontend\desktop\dist\server.js:161938:807)
我尝试在 server.ts 文件上使用 domino,但它仍然不起作用
这是我的 server.ts 文件
import 'zone.js/dist/zone-node';
import {enableProdMode} from '@angular/core';
// Express Engine
import {ngExpressEngine} from '@nguniversal/express-engine';
// Import module map for lazy loading
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import {join} from 'path';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
const app = express();
const PORT = process.env.PORT || 8086;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render('index', { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
在 Angular 9 ssr
nguniversal
中,这就是我在 window
中定义 server.ts
的方式,它对我有用。
//server.ts
import 'zone.js/dist/zone-node';
import {enableProdMode} from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
enableProdMode();
// The Express app is exported so that it can be used by serverless Functions.
export function app() {
const server = express();
const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
const domino = require('domino');
const win = domino.createWindow(indexHtml);
// mock
global['window'] = win;
global['document'] = win.document;
global['navigator'] = win.navigator;
// 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
// 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() {
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';
我不知道
domino
模块来自哪里 b/c 我没有安装它,但看起来它来自 angular cli
当你设置 nguniversal
🤷u200d♂️
如果你没有其他选择,你提到的错误应该使用多米诺骨牌来解决
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const domino = require('domino');
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['navigator'] = win.navigator;
如果您的错误仅发生在运行时,如果您的应用程序正在服务器端运行,您可以尝试不初始化图表,例如
import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
export class YourComponent implements OnInit {
constructor(@Inject(PLATFORM_ID) private platform: Object) { }
ngOnInit() {
if (isPlatformBrowser(this.platform)) {
//Initialise your charets here
}
}
}
例如,通常调用全局窗口元素是为了获取窗口大小或其他一些视觉方面。然而,在服务器上,没有“屏幕”的概念,因此很少需要此功能。
这可以使用 Angular 的依赖注入 (DI) 来完成,以便删除有问题的代码并在运行时插入替换代码。这是一个例子:
// window-service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class WindowService {
getWidth(): number {
return window.innerWidth;
}
}
// server-window.service.ts
import { Injectable } from '@angular/core';
import { WindowService } from './window.service';
@Injectable()
export class ServerWindowService extends WindowService {
getWidth(): number {
return 0;
}
}
// app-server.module.ts
import {NgModule} from '@angular/core';
import {WindowService} from './window.service';
import {ServerWindowService} from './server-window.service';
@NgModule({
providers: [{
provide: WindowService,
useClass: ServerWindowService,
}]
})
希望这对您有帮助。