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

Question

我已经阅读了不同的话题，那里的所有答案似乎都无法正常工作，我只是想设置一个服务于 angular 应用程序的 hapijs 服务器。

index.html + 来自 ng build 的其他相关文件位于文件夹 ./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 在 public 目录中。

我也试过：

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

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

然后我尝试将 /public/param* 路由到目录并将 /param* 路由到 index.html，希望现在 public 文件可以正确地 "read"，但这也不起作用。

我该怎么做才能让它发挥作用？我觉得我应该找到 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();

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

How to get routing to work in HapiJS + Angular?

hapijs

angular