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

Question

我是 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');
})

这是angular

的路线

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 { }

我正在使用 angular 5

我该如何解决这个问题？

谢谢

Answer 1

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

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

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

另一种选择是使用 SSR，但这有点麻烦。

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

Getting 404 page on page refresh using node and angular app

javascript

node.js

angular

angular-ui-router

http-status-code-404