javascript - 如何从 URL 中删除 # 和 Angular 构建和 nodejs 应用程序中的 404 重新加载问题？

Question

我有 Angular9 和 nodejs 应用程序。我正在做ng build --prod生产构建并将该构建文件放在 nodejs 公用文件夹中，现在我可以完美地访问该页面。

但我的问题在于我想删除 #. 目前我得到了

http://localhost:8080/#/about

http://localhost:8080/#/admin/create/blog

我使用一些技术来克服这个问题，就像我使用的那样

1. {useHash: false}
2. PathLocationStrategy：使用这个我做了角度构建并将构建文件夹放在Nodejs公共文件夹中。并且在 url # 中没有显示。但是当我尝试重新加载时，它显示 404 not found 错误。

我知道在 Nodejs 代码中需要添加一些额外的东西。但我不知道该怎么做。我检查了很多解决方案，但无法解决这个问题

我希望 URL 不附加 # 并且如果我刷新它不应该抛出任何 404 错误。谁能指导我如何解决这个问题？

项目结构：

NodeJs 代码 index.js

const express = require('express')
require('./db/mongoose')
const bodyParser = require('body-parser')
const path = require("path")
const app = express()
const port = process.env.PORT || 8080

let blogRouter = require('./routes/blogRouter');

app.use(express.static(path.join(__dirname, '/public/dist/blog-ui')))
app.use(bodyParser.urlencoded({ extended: 'true' }))
app.use(bodyParser.json({ limit: "50mb" }))
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, x-token, authorization");
    res.header("Access-Control-Expose-Headers", "x-token, authorization");
    res.header("Access-Control-Allow-Methods", "PUT, POST, DELETE, GET, OPTION");
    next();
});

app.listen(port, () => {
    console.log(`Server listening on ${port}... `)
});

app.get('/*', (req, res) => res.sendFile(path.join(__dirname)));

app.use('/api/v1/blog', blogRouter);

标签： javascriptnode.jsangulartypescript

Answer 1

我找到了一个 npm 包，它使用浏览器历史记录来加载页面。这是解决我的上述问题。

Npm 包：https ://www.npmjs.com/package/connect-history-api-fallback

我在代码中遵循的内容：

角应用：

1. 从我的代码中删除了 HashLocationStrategy、LocationStrategy 和 { useHash: true }。我的意思是不添加任何用于解决重新加载问题并且在 URL 中附加 # 的代码。我删除了这个相关的代码。

2. 构建： ng build --prod

3. 将 dist 文件夹复制到 nodejs 公用文件夹

Node 和 Express Js 项目变更：

我刚刚更改了 index.js 文件。

1. 安装在 npm 包之上：npm i connect-history-api-fallback --save
2. index.js 中的代码是否更改。下面我在 index.js 中添加的代码

我在 Index.js 中所做的更改

const history = require('connect-history-api-fallback');
const staticFileMiddleware = express.static(path.join(__dirname, '/public/dist/blog-ui'));
app.use(staticFileMiddleware);
app.use(history({
    disableDotRule: true,
    verbose: true
}));
app.use(staticFileMiddleware);

Index.js 完整代码

const express = require('express')
require('./db/mongoose')
const bodyParser = require('body-parser')
const path = require("path")
const app = express()
const port = process.env.PORT || 8080
const history = require('connect-history-api-fallback');

let blogRouter = require('./routes/blogRouter');

const staticFileMiddleware = express.static(path.join(__dirname, '/public/dist/blog-ui'));
app.use(staticFileMiddleware);
app.use(history({
    disableDotRule: true,
    verbose: true
}));
app.use(staticFileMiddleware);

app.use(bodyParser.urlencoded({ extended: 'true' }))
app.use(bodyParser.json({ limit: "50mb" }))
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, x-token, authorization");
    res.header("Access-Control-Expose-Headers", "x-token, authorization");
    res.header("Access-Control-Allow-Methods", "PUT, POST, DELETE, GET, OPTION");
    next();
});

app.listen(port, () => {
    console.log(`Server listening on ${port}... `)
});

app.get('/*', (req, res) => res.sendFile(path.join(__dirname)));

app.use('/api/v1/blog', blogRouter);