时间戳

首页 > 解决方案 > ASP.NET Web API 项目上的 Angular SPA 路由

angular - ASP.NET Web API 项目上的 Angular SPA 路由

问题描述

创建了一个 Angular SPA，上面有一些路由，例如：

/messages
/messages/:id

我可以使用ng serveURL 访问该页面，localhost:4200/messages并且localhost:4200/messages/:id

然后我构建了解决方案并将生成的内容复制到 ASP.NET Web API 2 项目中。在项目控制器上，我设置了默认路由("/")以返回 SPAindex.html文件，因此如果我运行应用程序，我将获得带有 URL 的 SPA：localhost:51384

从页面上的链接我到messages/:id页面，浏览器上显示的 URL是：

本地主机：51384/消息/：id

网址正常

从 Angular 文档我知道显示的 URL 是本地的，并且没有发送到服务器。如果我尝试手动访问该 URL，则会收到错误消息：

HTTP 错误 404.0 - 未找到

网址不正确

这很明显，因为在 WebAPI 控制器上没有/messages/:id.

我知道我有一个概念问题，但是有没有办法使用 WebAPI 的 URL 访问 SPA 路由？如果不是，将 SPA 集成到 .NET 项目并访问 SPA 路由的正确方法是什么？是否应该仅通过页面而不是通过 URL 访问它们？

在此先感谢，请随时发表评论或投票赞成/反对

标签： angulartypescriptasp.net-web-apiroutessingle-page-application

解决方案

所以你有一个很好的心态来解决这个问题。是的，服务器正在尝试访问messages/12312其控制器，但找不到它。

所以你有2个解决方案：

  1. 更改为不需要您修改服务器的# Angular 路由方式。为此，您可以在此处查看哈希策略的简单设置：https ://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles

  2. 此选项将需要您修改服务器设置并拦截所有路由。参考这篇文章：ASP.Net Core + Angular 2 app /home 路由

推荐阅读