在单页应用程序中使用 expressjs 时防止不必要的后端调用

Question

我在 Angular (10) 中有一个单页应用程序，其路由使用节点后端。我在我的应用程序中为我的 SPA 添加了路由-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'page1',
    component: page1Component,
  },
  {
    path: 'page2',
    component: page2Component,
  },
];

我还想从后端提供一些文件，一些我不想放在我的 dist 文件夹中的静态内容，以及一些来自我的后端代码的 json 响应 (api) . 我的节点应用程序的 server.js 文件如下所示：

const express = require('express');
const http = require('http');
const path = require('path');

const app = express();

const port = process.env.PORT || 3001;

app.use(express.static(__dirname + '/dist/my-spa'));
app.use(express.static(__dirname + '/static'));
app.use(express.static(__dirname + '/users'));

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

app.get(/page1|page2/, function (req, res) {
  res.sendFile(__dirname + '/dist/my-spa/index.html');
});

const server = http.createServer(app);

server.listen(port,() => console.log('running ...'));

效果很好，但是当我在我的 SPA 中导航时，比如从第 1 页到第 2 页，索引文件会再次加载。当我浏览我的 SPA 时，有没有办法阻止对 index.html 的调用？我知道我可以通过运行我的 api 在不同的端口或服务器上实现这一点，但我希望没有必要

Answer 1

我认为您错误地配置了应用程序中的锚标记。

SPA - 加载一次 index.html 的应用程序的单页应用程序状态，您不需要在后端设置路由。

一旦 angular 应用加载并启动，浏览器不应重新加载页面。如果是，您可能使用 <a href="/page"> 而不是 <a routerLink="/page">.

在单页应用程序中使用 expressjs 时防止不必要的后端调用

Prevent unneeded backend calls when using expressjs in a single page application

express

angular

angular-router