Ошибка: документ не определен, при сборке углового универсального приложения - PullRequest
Новая
       8

Ошибка: документ не определен, при сборке углового универсального приложения

0 голосов
/ 25 апреля 2018

Ошибка: 

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

Столкнувшись с проблемой углового универсального рендеринга на стороне сервера, я прогуглил это и просмотрел много сообщений, но не получил никакого полезного ресурса.

Ответы [ 4 ]

0 голосов
/ 22 мая 2019

У меня была такая же проблема, искал. Нашел этот ответ на 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;
0 голосов
/ 27 апреля 2018

Jquery работает на стороне браузера, а функции браузера не поддерживаются на стороне сервера.Например, если вы хотите использовать jquery в angular universal, вам нужно убедиться, что вы используете его только на стороне браузера.

Например, вы можете сделать следующее.

В вашем компоненте.Импортируйте файл 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");
    });
  }
}
0 голосов
/ 01 марта 2019

Чтобы избежать ошибок, вы можете создать макет для document и window объектов в реализации сервера NodeJS 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;

Здесь вы можете найти рабочий пример

После внесения изменений перестройте исходные коды сервера.

0 голосов
/ 25 апреля 2018

Если вы используете серверную часть, то вам необходимо добавить проверку, является ли платформа браузером или сервером, потому что такие ключевые слова, как «Документ», «Окно», недоступны при поддержке на стороне сервера

Вы можете использовать isPlatformBrowser от угловой.

...