Angular universal+Webpack 4:ReferenceError:窗口未定义

Question

我有一个使用NX创建的angular 9通用应用程序，在项目成功编译后，我收到了这个错误。

/Users/lribeiro/Sites/builders/dist/apps/landingpages-public/browser/main.js:1
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["main"],{
^
ReferenceError: window is not defined
at Object.<anonymous> (/Users/lribeiro/Sites/builders/dist/apps/landingpages-public/browser/main.js:1:1)
at Module._compile (internal/modules/cjs/loader.js:1201:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
at Module.load (internal/modules/cjs/loader.js:1050:32)
at Function.Module._load (internal/modules/cjs/loader.js:938:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47
A server error has occurred.
node exited with 1 code.

我已经在使用domino，并尝试了其他一些，但错误仍然存在。

这是我的设置。

Angular CLI: 9.1.12
Node: 14.5.0
OS: darwin x64
Angular: 9.1.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.901.12
@angular-devkit/build-angular              0.901.12
@angular-devkit/build-optimizer            0.901.12
@angular-devkit/build-webpack              0.901.12
@angular-devkit/core                       9.1.12
@angular-devkit/schematics                 9.1.12
@angular/cdk                               9.2.4
@angular/cli                               9.1.12
@angular/material                          9.2.4
@angular/platform-server                   9.1.12
@angular/service-worker                    9.1.12
@ngtools/webpack                           9.1.12
@nguniversal/builders                      10.1.0
@nguniversal/common                        9.1.1
@nguniversal/express-engine                9.1.1
@nguniversal/module-map-ngfactory-loader   v8.2.6
@schematics/angular                        9.1.12
@schematics/update                         0.901.12
rxjs                                       6.5.5
typescript                                 3.8.3
webpack                                    4.42.0

这是我的服务器

import 'zone.js/dist/zone-node';
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 {readFileSync} from 'fs';
const DIST_FOLDER = join(process.cwd(), 'dist/apps/landingpages-public/browser');
const template = readFileSync(join(DIST_FOLDER, 'index.html'));
const domino = require('domino');
const win= domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['CSS'] = null;
global['navigator'] = win.navigator;
console.log(global['window'])
export function app() {
const server = express();
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', DIST_FOLDER);
server.engine('html', require('hogan-express'));
server.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
server.get('*', async (req, res) => {
res.render(template, {req, "providers": [{provide: APP_BASE_HREF, useValue: req.baseUrl}], 'title': 'title'});
});
return server;
}
function run() {
const PORT = process.env.PORT || 4000;
const server = app();
server.listen(PORT, () => {
console.log(`Node express server listening on http://localhost:${PORT}`);
});
}
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';

我已经在具有相同配置的Universal示例项目的基础上使用Angular CLI进行了其他项目，并且运行良好。这可能是我使用的某个依赖项造成的吗？

谢谢！

Answer 1

我找到了解决方案。

基本上，我在构建过程中更改了serverTarget和browserTarget。

"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"serverTarget":  "landingpages-public:server",
"browserTarget": "landingpages-public:build"
}
},