如何解决 angular PathLocationStrategy(html5 route) refresh 404 without reidirect all resources to home page

Question

我使用 Angular7 和 Node 8.11.4 作为 Web 应用程序，现在我需要从 url 中删除“#”，所以我将 locationStrategy 形式 HashLocationStrategy 更改为 PathLocationStrategy 并在 index.html.

中添加 <base href="/">

它有效，但你知道刷新页面后它会出现 404 错误，我知道如何将所有资源重定向到主页，但我的目的是将一些资源重定向到特定的组件或页面，因为我需要直接访问这些页面而不是从主页访问这些页面，这是我的问题，我在 google 上搜索并发现大部分 rolution 是重定向到主页而不是特定页面，我知道 Angular vue react all使用前端路由器，但我还是想知道是否可以直接访问特定页面

如：访问http://localhost:4200/aaa，则不跳转到首页localhost:4200，直接显示aaa页。 /aaa 是路由到 Angular 组件的路径。

如果您有任何解决方案或对PathLocationStrategy有相同问题，请post您的回答html5 router。

Answer 1

问题已解决，看来很多人都有同样的问题，所以post我的解决方案在这里。

对于节点服务器：

在 server.js 的底部，添加以下方法：

const fs = require("fs");
app.use((req, res)=>{
  let rs = fs.createReadStream(`${__dirname}/dist/{your project name}/index.html`);
  res.writeHead(200, {"Content-type": "text/html"});
  rs.pipe(res);
})

__filename：这是Node变量，表示当前模块的文件名。

fs：fs模块提供了一个API用于与文件系统交互

这是在您的服务器中找不到资源的路由，例如 /aaa，当您尝试在更改为 PathLocationStrategy 后刷新页面 /aaa，您将收到 404 错误，添加此路由后，所有未找到的资源都会转到此路由，然后 fs.createReadStream(${__dirname}/dist/{your project name}/index.html) 会将您的资源重定向到 index.html，之后 Angular index.html 将处理您的路由并重定向到正确的页面。

如何解决 angular PathLocationStrategy(html5 route) refresh 404 without reidirect all resources to home page

How to solve angular PathLocationStrategy(html5 route) refresh 404 without reidirect all resources to home page

javascript

node.js

angular-ui-router

angular