Angular universal + Webpack 4 : ReferenceError: window is not defined

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.

我已经在使用多米诺骨牌，并尝试了一些，但错误仍然存在。

这是我的设置。

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

这是我的server.ts。

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';

我已经使用 Angular CLI 基于 Universal example project 使用相同的配置创建了其他项目，并且工作正常。这可能来自我正在使用的某些依赖项吗？

谢谢！

Answer 1

我找到了解决方案。

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

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

Angular universal + Webpack 4 : ReferenceError: window is not defined

Angular universal + Webpack 4 : ReferenceError: window is not defined

webpack

angular-universal

angular