使用节点和角度应用程序在页面刷新时获取 404 页面

Posted 2023-02-22

【中文标题】使用节点和角度应用程序在页面刷新时获取 404 页面

【英文标题】：Getting 404 page on page refresh using node and angular app

【发布时间】：2019-07-09 22:30:43

【问题描述】：

我是Angular 的新手。我尝试使用Nodejs 和Angular 创建一个CRUD 操作。我将Nodejs 和Express 用于后端，Angular 用于前端。

当我使用 routerLink 在页面上导航时，它可以正常工作，但是当我在页面上导航然后刷新页面时，它会显示找不到页面错误。

我知道那里发生了什么，Express 应用程序中没有定义路线，所以我刷新了显示 404 错误的页面。

如何使用 Angular 和 Express 路由进行这项工作？

这是我的代码。

app.js（服务器）

const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
var app = express();


app.use(bodyParser.urlencoded(extended : false));
app.use(bodyParser.json());

app.use(express.static(path.join(__dirname,'dist/MEAN-blog')));


app.get('/',(req,res) =>
    res.sendFile(path.join(__dirname,'dist/MEAN-blog/index.html'));
);

app.post('/register',(req,res) =>
    var u = new User(req.body);
    u.save();
    res.send(u).status(200);
)


var server  = http.createServer(app);

server.listen(8080,'0.0.0.0',() =>
    console.log('Server is running on 8080');
)

这里是角度的路线

const routes: Routes = [
    
        path : '',
        component : PostsComponent
    ,
    
        path : 'users',
        component : UsersComponent
    ,
    
        path : 'users/:id',
        component : UsersComponent
    ,
    
        path : 'post/:id',
        component : PostDetailsComponent
    ,
    
        path : 'login',
        component : LoginComponent
    ,
    
        path : 'signup',
        component : SignupComponent
    ,

];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
)
export class AppRoutingModule  

我正在使用角度 5

我该如何解决这个问题？

谢谢

【问题讨论】：

什么是默认路由器路径？

你的意思是基本路径？

基本路径

你的 index.html 有 吗？

我的意思是routes的定义。刷新后浏览器的路径是什么？

【参考方案1】：

通常我所做的是首先包含我所有的 api 端点，然后在最后添加这个

app.get('*',(req,res) =>
    res.sendFile(path.join(__dirname,'dist/MEAN-blog/index.html'));
);

这样，任何不是/api 的端点都将返回 index.html 并且角度路由将从那里接管。

另一种选择是使用 s-s-r，但它有点痛苦。

【讨论】：

它可以工作，但可能对用户不友好。因为我在注册页面并刷新页面，所以它在索引页面上抛出。

谢谢@Isaac，但还有其他方法吗？

所以回顾你的路径dist/MEAN-blog/index.html你似乎有多个index.html文件....你应该只有1个。每次发出请求时，响应应该是index.html , 然后你应该在你的 Angular 应用中定义路由来理解要渲染的组件。

太棒了，如果一切正常，您愿意接受我的回答吗？

也只是把它扔在那里..你的端点像/register你应该前缀/api所以它看起来像/api/register...这样在你的角度应用程序中你可以拥有定义了/register 的路由，它将呈现您的注册组件，并且您的客户端路由和后端路由之间没有任何冲突。它的一般最佳实践。