如何配置服务器部分或前端以避免在运行 ng build 时出现错误 not found 404

Question

我问这个问题是因为我不确定是从前端还是从后端来解决我的问题。

基本上，我遇到的问题是从一开始就以不同的路径重新加载页面 "/"，我收到错误 "not found 404"，我已经看到了一些可能的解决方案，例如包含一个 "hash" 但是对于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

显然它不存在，它在我的文件中标记了一个错误

更新二：

我的服务器 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 文件，这就是我的服务承诺无法兑现的原因。

Answer 1

您必须将所有路由重定向到您的 Angular 应用的 index.html。这是因为您的前端处理导航，而不是后端。

如果你使用快递，你可以有一个 catch-all 路线：

server.get('/*', (req, res) => {
  res.sendFile(__dirname + '/index.html');
})

Answer 2

在您的 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=./
                            ^^

几个有效的例子 base-url:

website url: http://localhost/my_folder_compilated/
base url:    /my_folder_compilated/

website url: http://localhost:4200/public/
base url:    /public/

N.B:不需要设置--deploy-url=./，只用base-url即可。

如何配置服务器部分或前端以避免在运行 ng build 时出现错误 not found 404

How to configure the server part or frontend to avoid the error not found 404 when I run ng build

javascript

node.js

typescript

angular-routing

angular

如何配置服务器部分或前端以避免在 运行 ng build 时出现错误 not found 404

How to configure the server part or frontend to avoid the error not found 404 when I run ng build

javascript

node.js

typescript

angular-routing

angular

如何配置服务器部分或前端以避免在运行 ng build 时出现错误 not found 404