使用 npm run build:prod 构建角度应用程序后无法运行 npm run server

Question

I have an angular app which is using angular universal. When I bundle my angular app using npm run build:prod everything looks fine and I don't get any errors but when running npm run server to see the app in browser I get the following error:

D:\Projects\node.js\darsad-site\dist\server.js:1544155
    Object(tslib_es6["c" /* __metadata */])("design:paramtypes", [Object, Object, Window,
                                                                                  ^

ReferenceError: Window is not defined
    at Module.<anonymous> (D:\Projects\node.js\darsad-site\dist\server.js:1544155:83)
    at __webpack_require__ (D:\Projects\node.js\darsad-site\dist\server.js:50381:30)
    at D:\Projects\node.js\darsad-site\dist\server.js:50445:18
    at Object.<anonymous> (D:\Projects\node.js\darsad-site\dist\server.js:50448:10)
    at __webpack_require__ (D:\Projects\node.js\darsad-site\dist\server.js:25201:30)
    at Module.<anonymous> (D:\Projects\node.js\darsad-site\dist\server.js:1589621:90)
    at __webpack_require__ (D:\Projects\node.js\darsad-site\dist\server.js:25201:30)
    at D:\Projects\node.js\darsad-site\dist\server.js:25265:18
    at Object.<anonymous> (D:\Projects\node.js\darsad-site\dist\server.js:25268:10)
    at __webpack_require__ (D:\Projects\node.js\darsad-site\dist\server.js:21:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! darsad@0.0.0 server: `node local.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the darsad@0.0.0 server 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\Parsa\AppData\Roaming\npm-cache\_logs\2020-09-07T06_59_07_473Z-debug.log

This is my package.json file:

{
  "name": "darsad",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "mode": "production",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:server:prod": "ng run darsad:server && webpack --config webpack.server.config.js --progress --colors",
    "build:browser:prod": "ng build --prod",
    "build:prod": "npm run build:browser:prod && npm run build:server:prod",
    "server": "node local.js",
    "build:browser:serverless": "ng build --prod --base-href /production/",
    "build:serverless": "npm run build:browser:serverless && npm run build:server:serverless",
    "build:prod:deploy": "npm run build:prod && npm run deploy",
    "build:serverless:deploy": "npm run build:serverless && npm run deploy",
    "deploy": "serverless deploy",
    "build:server:serverless": "ng run darsad:server:serverless && webpack --config webpack.server.config.js --progress --colors",
    "dev:ssr": "ng run darsad:serve-ssr",
    "serve:ssr": "node dist/server/main.js",
    "build:ssr": "ng build --prod && ng run darsad:server:production",
    "prerender": "ng run darsad:prerender",
    "buildWithIncreaseMemory": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "10.0.14",
    "@angular/common": "^10.1.0",
    "@angular/compiler": "10.0.14",
    "@angular/core": "10.0.14",
    "@angular/forms": "10.0.14",
    "@angular/http": "^7.2.16",
    "@angular/platform-browser": "^10.1.0",
    "@angular/platform-browser-dynamic": "10.0.14",
    "@angular/pwa": "0.802.2",
    "@angular/router": "10.0.14",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@gorniv/ngx-universal": "1.1.5",
    "@ng-toolkit/serverless": "7.1.2",
    "@ng-toolkit/universal": "^1.1.51",
    "@nguniversal/common": "^10.1.0",
    "@nguniversal/express-engine": "^10.1.0",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "@schematics/angular": "^10.1.0",
    "angular2-cookie": "^1.2.6",
    "angular2-useful-swiper": "^5.0.1",
    "aws-serverless-express": "^3.3.8",
    "commonjs": "0.0.1",
    "cookie-parser": "1.4.4",
    "core-js": "3.2.1",
    "cors": "~2.8.4",
    "cp-cli": "^1.1.0",
    "express": "^4.15.2",
    "font-awesome": "^4.7.0",
    "highcharts": "^7.2.2",
    "highcharts-angular": "^2.8.0",
    "jquery": "^3.5.1",
    "ng2-jalali-date-picker": "^2.4.2",
    "ngx-cookie-service": "^2.4.0",
    "rxjs": "6.6.2",
    "swiper": "^3.4.2",
    "ts-loader": "4.2.0",
    "tslib": "^1.13.0",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.8",
    "@angular/cli": "10.0.8",
    "@angular/compiler-cli": "10.0.14",
    "@angular/language-service": "10.0.14",
    "@angular/platform-server": "10.0.14",
    "@angularclass/hmr": "^2.1.3",
    "@nguniversal/builders": "^10.1.0",
    "@types/express": "^4.17.0",
    "@types/jasmine": "3.4.0",
    "@types/jasminewd2": "2.0.6",
    "@types/node": "12.0.10",
    "codelyzer": "5.1.0",
    "jasmine-core": "3.4.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.2.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "2.1.0",
    "karma-jasmine": "2.0.1",
    "karma-jasmine-html-reporter": "1.4.2",
    "opencollective": "^1.0.3",
    "protractor": "5.4.2",
    "serverless": "1.40.0",
    "serverless-apigw-binary": "^0.4.4",
    "ts-loader": "4.2.0",
    "ts-node": "8.3.0",
    "tslint": "5.18.0",
    "typescript": "3.9.7",
    "webpack-bundle-analyzer": "3.4.1",
    "webpack-cli": "3.3.7",
    "webpack-node-externals": "1.7.2"
  }
}

My server.ts file:

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {enableProdMode} from '@angular/core';
import {ngExpressEngine} from '@nguniversal/express-engine';
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

import * as express from 'express';
import * as bodyParser from 'body-parser';
import * as cors from 'cors';
import * as compression from 'compression';

import {join} from 'path';

enableProdMode();

export const app = express();

app.use(compression());
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// const DIST_FOLDER = join(process.cwd(), 'dist');

const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
console.log(require('./dist/server/main'));
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', './dist/browser');

app.get('/redirect/**', (req, res) => {
  const location = req.url.substring(10);
  res.redirect(301, location);
});

app.get('*.*', express.static('./dist/browser', {
  maxAge: '1y'
}));

app.get('/*', (req, res) => {
  res.render('index', {req, res}, (err, html) => {
    if (html) {
      res.send(html);
    } else {
      console.log('server.ts');
      console.error(err);
      res.send(err);
    }
  });
});

Need to mention that I commented out any use of window object in my app and try to build the project and it was built without any errors but when running npm run server it throws the prior error.

Answer 1

The reason for this error is that you use the window reference is the server side world.

One solution on this is to use Domino inside your ./server.ts . Like this:

const win = domino.createWindow(templateA);
win.Object = Object;
win.Math = Math;
global['window'] = win;
global['document'] = win.document;