时间戳

首页 > 解决方案 > 如何配置服务器部分或前端以避免在我运行 ng build 时出现错误 not found 404

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

问题描述

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

基本上，我遇到的问题是，当从一开始以不同的路线重新加载页面时"/"，我得到了错误"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 文件，这就是我的服务承诺无法解决的原因。

标签： javascriptnode.jsangulartypescriptangular-routing

解决方案

index.js在您的 express文件中使用以下设置，将 设置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');
});

更新：使用上面的代码，您的路线可以正常工作，但是对于 JavaScript 和 CSS 文件，您会得到 404。原因是：

// 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/

注意：您不需要设置--deploy-url=./，base-url仅使用。

推荐阅读