Question

当我使用ng服务时没有问题。但是在运行npm ssr时失败，并显示错误我该怎么办。我没有发现相同的问题。请，也许yiu有什么主意吗？

PS先前版本运行良好。在我安装了使用primeng / primengicons的charts.js ang quills并将其库的所有导入拆分到单独的模块后，崩溃便开始了。

解决方案：对于我的server.ts文件，一切正常，如答案所示。使用primeng时，应跳过从primeng / primeng的所有直接导入，应为每个使用的组件替换为单独的导入。因为primeng / primeng要求图书馆管理羽毛笔，所以chart.js。鹅毛笔让这个ssr解决方案崩溃了。 1）我卸载quills，chart.js（我不在项目中使用它们） 2）从primeng检查进口完成希望对您有帮助

依赖项

"dependencies": {
    "@angular/animations": "~8.1.0",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "~8.1.0",
    "@angular/compiler": "~8.1.0",
    "@angular/core": "~8.1.0",
    "@angular/forms": "~8.1.0",
    "@angular/platform-browser": "~8.1.0",
    "@angular/platform-browser-dynamic": "~8.1.0",
    "@angular/platform-server": "^8.1.0",
    "@angular/pwa": "^0.12.4",
    "@angular/router": "~8.1.0",
    "@angular/service-worker": "~8.1.0",
    "@nguniversal/module-map-ngfactory-loader": "^7.1.1",
    "@ngx-lite/json-ld": "^0.5.2",
    "@types/node": "^12.0.12",
    "angular-google-charts": "^0.1.6",
    "chart.js": "^2.8.0",
    "core-js": "^2.5.4",
    "ngx-clipboard": "^12.1.2",
    "ngx-facebook": "^2.4.0",
    "primeicons": "^1.0.0",
    "primeng": "^8.0.1",
    "quill": "^1.3.6",
    "rxjs": "~6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  }

server.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();
global['Event'] = null;

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

//fix of document issue 
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
const domino = require("domino");
const fs = require("fs");
const path = require("path");
const templateA = fs
  .readFileSync(path.join("dist/browser", "index.html"))
  .toString();
const win = domino.createWindow(templateA);

win.Object = Object;
win.Math = Math;

global["window"] = win;
global["document"] = win.document;
global["branch"] = null;
global["object"] = win.object;

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    callback(null, html);
  });
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(Node server listening on http://localhost:${PORT});
});

控制台错误

/home/e.s/proj/company/dist/server.js:218141
var elem = document.createElement('div');
           ^

ReferenceError: 

/home/e.s/proj/company/dist/server.js:218142
var elem = document.createElement('div');
           ^

ReferenceError: document is not defined
    at Object.DIFF_DELETE (/home/e.s/proj/company/dist/server.js:218142:12)
    at __webpack_require__ (/home/e.s/proj/company/dist/server.js:210590:30)
    at Object.defineProperty.value (/home/e.s/proj/company/dist/server.js:211534:1)
    at __webpack_require__ (/home/e.s/proj/company/dist/server.js:210590:30)
    at Object.defineProperty.value (/home/e.s/proj/company/dist/server.js:216136:14)
    at __webpack_require__ (/home/e.s/proj/company/dist/server.js:210590:30)
    at Object.defineProperty.value (/home/e.s/proj/company/dist/server.js:220526:13)
    at __webpack_require__ (/home/e.s/proj/company/dist/server.js:210590:30)
    at Object.<anonymous> (/home/e.s/proj/company/dist/server.js:222038:18)
    at __webpack_require__ (/home/e.s/proj/company/dist/server.js:210590:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Company@0.0.0 ssr: `ng run Company:server && ng build --prod && npm run webpack:server && node dist/server.js`
npm ERR! Exit status 1

使用Angular Universe使用ssr构建失败。更新了我的解决方案

0 个答案: