我问这个问题是因为我不确定前端还是后端是否可以解决我的问题。
基本上，我遇到的问题是，当从头开始以不同的路线重新加载页面时 "/" ，我收到错误 "not found 404" ，我已经看到了一些可能的解决方案，例如包含“哈希”，但对于 SEO 问题我不能这样做。我也看到有解决这个问题的配置，但是这些配置是在apache服务器或者ISS中。
我的应用程序在使用 angular-cli 和 ng serve 时工作正常，但是当我运行时
ng build --prod --base-href=./ and --deploy-url=./
当我重新加载页面时，路线不起作用。
例如:
http://localhost/my_folder_compilated/programa/detalle-programa/5cf7d27faa8e180017211754 --> 404 not found!
我需要将其部署在 Heroku 服务器上，或者在没有任何适用于 Nodejs 的情况下。
如何解决这个问题？
// this is the route that I have in my app.routing.ts
{path: 'programa/detalle-programa/:programaId', component:
DetalleProgramaComponent},
{path: '**', component: NotFoundComponent}
注意
我认为解决方案是在后端。我正在使用nodejs(express)，但我无法修复它。
更新
我正在使用此代码，并且非常适合我的路线，
const distDirectory = path.join(__dirname, 'public');
app.get('*', function (req, res, next) {
const file_path = path.join(distDirectory, req.url.split('?').shift());
console.log(file_path)
if (fs.existsSync(file_path)) next();
else res.sendFile(path.join(distDirectory, 'index.html'));
});
app.use(express.static(distDirectory));
除了这个:
localhost/programa/detalle-programa/5cf7d27faa8e180017211754
在控制台中，这是我接收的路由:
...public\programa\detalle-programa\runtime.366eb317d0165de30d51.js
显然它不存在，并且它在我的文件中标记了一个错误
更新2:
我的服务器heroku上的文件夹是:
public --> here my files, and the index.html
我的index.html是:
<head>
<meta charset="utf-8">
<title>title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.51e30e538d2560c1a9e9.css">
</head>
<body>
<app-root ></app-root>
<script type="text/javascript" src="/runtime.a5dd35324ddfd942bef1.js">
</script>
<script type="text/javascript" src="/polyfills.3eb7881d3a00da6c675e.js">
</script>
<script type="text/javascript" src="/scripts.dd86f002a5aef1b13f0f.js">
</script>
<script type="text/javascript" src="/main.23ac360bc829b49bc07d.js">
</script>
</body>
</html>
发生在我身上的问题是我所做的所有请求都返回我的index.html文件，这就是为什么我的服务 promise 无法得到解决。
最佳答案
在 Express index.js 文件中使用以下设置，设置 distDirectory
到您的 dist 目录。
const path = require('path');
const express = require('express');
const fs = require('fs');
const app = express();
const distDirectory = path.join(__dirname, 'dist');
app.get('*', function (req, res, next) {
const file_path = path.join(distDirectory, req.url.split('?').shift());
if (fs.existsSync(file_path)) next();
else res.sendFile(path.join(distDirectory, 'index.html'));
});
app.use(express.static(distDirectory));
app.listen(80, function () {
console.log('listening');
});
更新:使用上面的代码，您的路线可以正常工作，但您会收到 404 错误 JavaScript 和 CSS 文件。原因是:
// Never use a leading dot in base-href
ng build --prod --base-href=./
^^
有效基本网址的一些示例:
website url: http://localhost/my_folder_compilated/
base url: /my_folder_compilated/
website url: http://localhost:4200/public/
base url: /public/
注意:您不需要设置--deploy-url=./，仅使用base-url。
关于javascript - 如何配置服务器部分或前端以避免运行 ng build 时出现未找到 404 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56906758/