角度通用+快速代理

时间:2018-12-07 09:03:45

标签: express angular-universal webpack-4

在我的项目中,我正在Angular 7中将此template用于SSR,它使用express作为请求处理程序,并使用webpack 4作为模块捆绑程序。

我的开发服务器正在localhost:4000上运行。我还在不同的端口localhost:3000上有API服务器,因此我必须实现代理以处理来自不同端口的请求。

我添加了此代理来表示,并且在浏览器上也能正常工作(我从位于不同端口的API获得了响应),但是每次发送此请求时,控制台ERROR [Error]中都出现了奇怪的错误。

这是我对代理的明确配置:

import * as express from "express";

export function createApi(distPath: string, ngSetupOptions: NgSetupOptions) {
  const api = express();

  api.set("view engine", "html");
  api.set("views", distPath);

  // Angular Express Engine
  api.engine("html", ngExpressEngine(ngSetupOptions));

  //Proxy
  const proxy = require("express-http-proxy");
  api.get("/v1/*", (req, res, next) => {
    const modifiedURL = "http://localhost:3000";
    return proxy(modifiedURL)(req, res, next);
  });

  // Server static files from distPath
  api.get("*.*", express.static(distPath));

  // All regular routes use the Universal engine
  api.get("*", (req, res) => res.render("index", { req, res }));

  return api;
}

我认为问题也可能在main.server.ts中。

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

import { createServer } from "http";
import { join } from "path";

import { enableProdMode } from "@angular/core";
import { MODULE_MAP } from "@nguniversal/module-map-ngfactory-loader";
import { NgSetupOptions } from "@nguniversal/express-engine";

import { createApi } from "./api";

export { AppServerModule } from "./app/app.server.module";

export const PORT = process.env.PORT || 4000;
export const BROWSER_DIST_PATH = join(__dirname, "..", "browser");

export const getNgRenderMiddlewareOptions: () => NgSetupOptions = () => ({
  bootstrap: exports.AppServerModuleNgFactory,
  providers: [
    // Import module map for lazy loading
    {
      provide: MODULE_MAP,
      useFactory: () => exports.LAZY_MODULE_MAP,
      deps: []
    }
  ]
});

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

let requestListener = createApi(
  BROWSER_DIST_PATH,
  getNgRenderMiddlewareOptions()
);

// Start up the Node server
const server = createServer((req, res) => {
  requestListener(req, res);
});

server.listen(PORT, () => {
  console.log(`Server listening -- http://localhost:${PORT}`);
});

// HMR on server side
if (module.hot) {
  const hmr = () => {
    const {
      AppServerModuleNgFactory
    } = require("./app/app.server.module.ngfactory");

    exports.AppServerModuleNgFactory = AppServerModuleNgFactory;

    requestListener = require("./api").createApi(
      BROWSER_DIST_PATH,
      getNgRenderMiddlewareOptions()
    );
  };

  module.hot.accept("./api", hmr);
  module.hot.accept("./app/app.server.module.ngfactory", hmr);
}

export default server;

为什么我会收到这个奇怪的错误?有什么方法可以获取更多有关此的信息吗?仅当我正在其他端口上向API发送请求时,才会出现错误。

0 个答案:

没有答案