angular - 使 Angular 4 路由在产品服务器上工作的最快解决方法是什么？

Question

我花了整整 6 天的时间将仅 HTML5 的应用程序转换为 Angular 4 路由应用程序。只是为了能够使用 Angular 4 路由使网站对 SEO 更友好。

开发成功后，我将它部署在服务器上，只是为了实现直接 url 导致 404 页面。示例： http : //abc.com/route

同样的事情在点击 routerLinks 时效果很好。我已经看过几篇关于这个问题的博客文章，但我无法决定哪个是最快的解决方案。有人可以帮我吗？请注意，我没有使用 Angular CLI。

Answer 1

这是因为所有路由都必须转到 index.html 并且 angular-router 将从那里进行路由。因此，启动并运行节点服务器并将所有请求重定向到 index.html

这就是你的服务器的样子

import { json, urlencoded } from "body-parser";
import * as compression from "compression";
import * as express from "express";
import * as path from "path";


const app: express.Application = express();

app.disable("x-powered-by");

app.use(json());
app.use(compression());
app.use(urlencoded({ extended: true }));

if (app.get("env") === "production") {

  // in production mode run application from dist folder
  app.use(express.static(path.join(__dirname, "/../client")));
}
app.use('*', (req, res)  => {
  res.sendFile(path.join(__dirname, '/../client/index.html'));
});
// catch 404 and forward to error handler
app.use((req: express.Request, res: express.Response, next) => {
  const err = new Error("Not Found");
  next(err);
});

// production error handler
// no stacktrace leaked to user
app.use((err: any, req: express.Request, res: express.Response, next: express.NextFunction) => {

  res.status(err.status || 500);
  res.json({
    error: {},
    message: err.message,
  });
});

export { app };

你可以克隆这个项目并用你的替换 Angular 应用程序