ioni c с реализацией SSR - PullRequest
Новая
       55

ioni c с реализацией SSR

0 голосов
/ 05 августа 2020

Попытка добавить функцию js в мой проект ioni c, но получение self не определяется ошибкой. После попытки добавить себя как global ["self"] = win.self || выиграть; Я получаю сообщение об ошибке

ERROR TypeError: невозможно переопределить свойство: конструктор. Используйте последнюю версию всех необходимых зависимостей в проекте.

server.ts 

import "zone.js/dist/zone-node";

import { ngExpressEngine } from "@nguniversal/express-engine";
import * as express from "express";
import { join } from "path";
import { enableProdMode } from "@angular/core";
import { AppServerModule } from "./src/main.server";
import { APP_BASE_HREF } from "@angular/common";
import { existsSync } from "fs";

enableProdMode();
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), "dist/app/browser");
  const indexHtml = existsSync(join(distFolder, "index.original.html"))
    ? "index.original.html"
    : "index";
  const domino = require("domino");
  const win = domino.createWindow(indexHtml);
  // mock
  global["window"] = win;
  global["self"] = win.self;
  global["document"] = win.document;
  global["navigator"] = win.navigator;
  server.engine("html", ngExpressEngine({ bootstrap: AppServerModule }));

  server.set("view engine", "html");
  server.set("views", distFolder);

  server.get(
    "*.*",
    express.static(distFolder, {
      maxAge: "1y",
    })
  );

  server.get("*", (req, res) => {
    res.render(indexHtml, {
      req,
      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
    });
  });
  return server;
}
function run(): void {
  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";

Ответы [ 2 ]

1 голос
/ 31 августа 2020

У меня такая же проблема. Добавил эти строки в мой файл server.ts и после добавления global ['self'] = win; произошла ошибка. Без него отображается неопределенная ошибка. 

const domino = require('domino');

const templateA = readFileSync(join(distFolder, indexTemplate)).toString();
const win = domino.createWindow(templateA);
(win as any).Object = Object;
(win as any).Math = Math;
global['self'] = win; //TODO: Is giving ERROR TypeError: Cannot redefine property: constructor at Function.defineProperty
global['window'] = win;
global['win'] = win;
global['branch'] = null;
0 голосов
/ 05 августа 2020

Вы уже это проверили?

The Ultimate Ioni c Руководство по рендерингу на стороне сервера (SSR)

С Angular Universal он может использовать сторону сервера Рендеринг в приложениях Ioni c, и поскольку есть новый пакет, который делает доступными компоненты Ioni c. Автор показывает шаги для выполнения sh интеграции, вы можете найти ответ в его объяснении. 

npm install @angular/animations @ionic/angular-server
ng add @nguniversal/express-engine

Эти строки делают приложение SSR готовым. Пакет анимации необходим для Angular универсального в целом, а специальный пакет Ioni c angular -server требуется для гидратации веб-компонентов на стороне сервера.

...