如何解决 Angular 和 MVC 的页面刷新问题？答案

【问题标题】：How to fix page refresh issue with Angular and MVC?如何解决 Angular 和 MVC 的页面刷新问题？
【发布时间】：2019-04-04 09:48:24
【问题描述】：

我在 MVC 5 中使用 Angular 5，并且我在其中使用 Angular 路由。一切正常，但是当浏览器地址栏上有一个角度路由 URL 并且我正在执行 F5 时，它会给出错误 - 找不到资源。

我确定是因为这个 URL 模式与我的 MVC 路由不匹配，但它与角度路由匹配。

如何解决？

【问题讨论】：

标签： c# asp.net-mvc angular

【解决方案1】：

解决这个问题很简单。在您的导入模块中执行此操作： RouterModule.forRoot(路由，{ useHash: true })。在这种情况下，哈希后的 Url 不会再发送到您的服务器端。欲了解更多信息，请转到here。

【讨论】：

【解决方案2】：

您可能需要为 IIS 安装 UrlRewriter 模块，然后您需要在 web.config system.webServer/rewrite/rules 中包含以下内容

<rule name="Angular Routes" stopProcessing="true">
  <match url=".*" />
  <conditions logicalGrouping="MatchAll">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
  </conditions>
  <action type="Rewrite" url="/Home/Index?url={UrlEncode:{R:0}}" />
</rule>

重写规则的具体细节取决于您的应用。我在Home/Index 视图中连接了我的角度根html 节点。如果您以不同的方式执行此操作，则必须对其进行更新以路由到您期望它去的地方。

Angular docs

【讨论】：