如何让路由在 HapiJS + Angular 中工作？

Question

我已经阅读了不同的线程并且那里的所有答案似乎都无法正常工作，我只是想设置一个 hapijs 服务器，它正在为一个角度应用程序提供服务。

ng build 中的 index.html 和其他相关文件位于 ./public 文件夹下。现在在 server.js 我这样做：

server.route({
method: 'GET',
path: '/{param*}',
handler: {
  directory: {
    path: Path.join(__dirname, 'public'),
    redirectToSlash: true,
    index: true,
  }
}
});

这很好用，但仅适用于 localhost:3000/ 并且如果您在下面执行任何操作（例如 localhost:3000/admin），它将以 404 响应，这是有道理的，因为公共目录中没有 /admin .

我也试过了：

server.route({
method: 'GET',
path: '/{param*}',
handler: {
  file: './public/index.html'
}
});

这不起作用，因为现在 /public 下的文件不再被发现，因为它们也被路由到 index.html。

然后我尝试将 /public/param* 路由到目录并将 /param* 路由到 index.html，希望现在可以正确“读取”公共文件，但这并不奏效。

我该怎么做才能让它发挥作用？我觉得我应该找到 100 个线程来让它工作，但我没有看到一个对我有用的例子。

谢谢！

Answer 1

如果您想让所有其他路由都路由到 index.html，您可以创建一个 onPreResponse 处理程序。

'use strict';
const Path = require('path');
const Inert = require('inert');
const Hapi = require('hapi');

const init = async () => {
  const server = Hapi.server({
    port: 3000,
    host: 'localhost',
    routes: {
      files: {
        relativeTo: Path.join(__dirname, 'public'),
      },
    },
  });

  await server.register(Inert);

  server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
      directory: {
        path: '.',
        redirectToSlash: true,
        lookupCompressed: true,
        index: true,
      },
    },
  });

  server.ext('onPreResponse', (request, h) => {
    const response = request.response;

    if (!response.isBoom) {
      return h.continue;
    }

    if (response.output.statusCode === 404) {
      return h.file('index.html');
    }
  });

  await server.start();
  console.log('Server running on %', server.info.uri);
};

process.on('unhandledRejection', err => {
  console.log(err);
  process.exit(1);
});

init();