Question

错误：

factory(require("jquery"), document, window, navigator);
                               ^ReferenceError: document is not defined

面对问题角度通用渲染服务器端，我搜索了这个并经历了很多帖子但没有得到任何有用的资源。

Answer 1

Jquery在浏览器端工作，服务器端不支持浏览器功能。例如，如果你想在angular universal中使用jquery，你必须确保你只在浏览器端使用它。

例如，您可以执行以下操作。

在component.ts文件中导入以下内容。

import { isPlatformServer } from '@angular/common';
import * as $ from 'jquery';

然后在你的ngOnInit函数中执行以下操作

constructor(@Inject(PLATFORM_ID) private platformId: any) {}
  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
     /* jQuery here */
     $("#test-button").click(function () {
       alert('WOOOW');
       $(this).css("background","#000");
    });
  }
}

Answer 2

如果您使用服务器端，则必须添加检查平台是否为浏览器或服务器，因为文档，窗口等关键字在服务器端支持中不可用

你可以使用角度来看isPlatformBrowser。

Answer 3

为避免错误，您可以在NodeJS服务器实现document中为window和server.ts对象创建模拟：

// ssr DOM
const domino = require('domino');
const fs = require('fs');
const path = require('path');
// index from browser build!
const template = fs.readFileSync(path.join(DIST_FOLDER, 'index.html')).toString();
// for mock global window by domino
const win = domino.createWindow(template);
// mock
global['window'] = win;
// not implemented property and functions
Object.defineProperty(win.document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});

// mock documnet
global['document'] = win.document;
// othres mock
global['CSS'] = null;
// global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
global['Prism'] = null;

Here you can find working example

修改后，再次重建服务器源。

Answer 4

我遇到了同样的问题，进行了搜索。在https://github.com/angular/universal-starter/issues/623

上找到了这个答案

将此代码放在您的server.ts文件中

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;

错误：文档未定义，在构建角度通用应用程序

4 个答案: