时间戳

首页 > 解决方案 > Express Server + Angular 深层链接

angular - Express Server + Angular 深层链接

问题描述

我正在使用 Express + Angular 创建一个 SPA。部分功能是一封电子邮件，其中包含用户在重置密码时单击的链接 ( https://[domain].com/reset-password/[token])。

当用户单击该链接时，它会将他们带到应用程序登录页面 ( /)，而不是重置密码页面 ( /reset-password/[token])。

如何处理从电子邮件通过快递到我的 Angular 应用程序的深层链接？

我的特快路线是：

router.get('*', function (req, res, next) {
  res.redirect('/');
});

我拥有的 Anagular 路线是：

{
  path: 'reset-password/:token',
  loadChildren: () => import('./pages/reset-password/reset-password.module').then((m) => m.ResetPasswordModule),
},

如果我在 Angular 应用程序中创建一个链接来reset-password/:token路由，它就可以工作。只有通过 Express 发送链接时才会出现问题。

我怎样才能解决这个问题而不必依赖使用RouterModule.forRoot(routes, {useHash: true})我过去使用过的 HashLocationStratergy ( ) 解决方案

标签： angularexpressdeep-linking

解决方案

我不知道你是如何发送 angular 的静态文件的。但这里有一个完整的例子。您的问题是您如何提供静态文件。

// Express will serve all static files from public folder
const publicPath = path.resolve(__dirname, './public');
app.use(express.static(publicPath));

然后，如果 express 没有找到文件，ej. /home，不是文件是角度路线，发送index.html NOT REDIRECT

// Put this after all your api routes
const indexHtml = path.resolve(__dirname, './public/index.html');
app.get('*', (req, res) => {
    res.sendFile(indexHtml);
});

这是 express 提供静态文件时的示例，但这不是更好的方法，建议使用 cdn 或代理（如 ngnix）来提供静态文件。

PS。我英语说得不太好。

推荐阅读