当我运行ng build时如何配置服务器部分或前端以避免找不到错误404

yavg

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

基本上,我有一个问题,当从一开始以不同的方式重新加载页面时"/",出现错误"not found 404",我看到了一些可能的解决方案,例如包含“哈希”,但是对于SEO问题,我无法做到。我还看到有解决此问题的配置,但是这些配置在apache服务器或ISS中。

ng serve与结合使用angular-cli时我的应用程序运行良好,但是当我运行

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(快速),但无法修复。

更新资料

我正在使用此代码,并且在我的路线上效果很好,

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

慕尼姆纳

在您的expressindex.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');
});

更新:使用以上代码,您的路由有效,但是JavaScript和CSS文件却得到404。原因是:

// 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只能使用

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么@ angular / fire显示:“服务器错误。证书已过期”,当我运行:ng add @ angular / fire?

离子4-当我运行“离子服务器”时,获取[ERROR] ng意外关闭(退出代码1)

错误:运行服务器后找不到页面(404)

当我运行“ npm run ng new app”时,谁能解释这个错误?

ng-repeater打印结果0;当我运行该功能时

当我尝试运行 Flask 代码时,找不到 CSS 文件错误 404

当我尝试在服务器上运行 Symfony 3 项目时出现错误 Twig

当我在Django中运行服务器时如何设置默认URL

当我运行游戏时物体消失了

当我运行此脚本时,NaN

当我运行它时,BeautifulSoup返回[]

UnhandledPromiseRejectionWarning:错误:当我尝试运行我的代码时找不到模块“../database/db”

当我运行./manage.py运行服务器时,出现错误ImportError:没有名为celery的模块

当我按下按钮时,如何让我的代码运行?

当我运行 'gulp' 时,如何查看 linting 错误?

当我运行服务器时,如何让我的 Django 应用程序*做*一些事情?

每当我运行代码时,我的网站就会刷新

Meteor Build for android:TypeError:当我运行生产构建的服务器时,无法读取空错误的属性“切片”

当我使用ng服务运行时,如何在Angular6项目中使用ionic4组件

当我“运行” Android项目时,“编辑配置”页面打开

当我向 api 服务器发出 post 请求时收到 404 错误

当我运行flutter build时,IOS卡在了过程的中间

当我运行“ sudo su”时,我得到--bash:找不到所有命令

为什么当我运行ggttest时出现错误?

当我尝试运行测试时出现错误

当我尝试在本地运行功能时,firebase显示错误

当我运行keytoll获取keyrelease时显示此错误

当我运行雪花阶段查询时,出现aws错误

当我运行Eclipse项目时出现错误