angular - Angular 11 Universal 不在页面源中显示动态数据

Question

我的 Angular 11 SSR 没有在页面源中显示动态数据。我已经完成了所有搜索并实现了我在网上找到的任何内容。有人可以帮忙吗？

我已将所有客户端代码封装在 isplatformbrowser 中。当我运行 ng run serve:ssr 时，我也没有在控制台中看到任何错误日志。我还为某些路线添加了一个解析器，但仍然没有运气。

server.ts 文件

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

import { ngExpressEngine } from "@nguniversal/express-engine";
import * as express from "express";
import { join } from "path";

import { AppServerModule } from "./src/main.server";
import { APP_BASE_HREF } from "@angular/common";
import { existsSync } from "fs";

import { NgxRequest, NgxResponse } from "@gorniv/ngx-universal";
import "localstorage-polyfill"
// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), "dist/project/browser");
  const indexHtml = existsSync(join(distFolder, "index.original.html")) ? "index.original.html" : "index";
  global["localStorage"] = localStorage;

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine("html", ngExpressEngine({
    bootstrap: AppServerModule,
  }));

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

  // Serve static files from /browser
  server.get("*.*", express.static(distFolder, {
    maxAge: "1y"
  }));

  // Do not serve the following routes via Universal
  server.get("/", (req, res) => {
    res.sendFile(join(distFolder, "index.html"));
  });

  // All regular routes use the Universal engine
  server.get("*", (req, res) => {
    res.render(indexHtml,
        {
          req: req,
          res: res,
          providers: [
            {
              provide: APP_BASE_HREF, useValue: req.baseUrl
            },
            {
              provide: NgxRequest, useValue: (req)
            },
            {
              provide: NgxResponse, useValue: (res)
            }
          ]
        });
  });

  return server;
}

function run() {
  const port = process.env.PORT || 5000;

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

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
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";

标签： angularuniversal