Angular 5 URL重写问题 [英] Issues with Angular 5 URL Rewrite

问题描述

我用两个路由构建了一个Angular 5应用程序.我目前有: 主页/每日摘要和主页/文档.当我将应用程序发布到服务器(带有URL Rewrite的IIS 6.0)并导航到Home.aspx页时，一切运行正常，并且如果单击这些链接，路由"会将我定向到DailySummary和Documents.我遇到的问题是在不转到Home.aspx的情况下刷新或导航到页面，它将我定向到根文件夹.我确定这与我的URL重写规则有关:

I built an Angular 5 application with two routes. I currently have: Home/DailySummary and Home/Documents. When I publish the application to the server (IIS 6.0 w/ URL Rewrite) and navigate to the Home.aspx page everything runs perfectly and my Routing directs me to DailySummary and Documents if I click those links. The issue I'm having is refreshing or navigating to the page without going to Home.aspx, it directs me to the root folder. I'm certain this has something to do with my URL rewrite rule:

<rule name="RewriteRules" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Redirect" url="/NewWebApp/" />
</rule>

我的Home.aspx页面具有相同的href值("/NewWebApp/")

My Home.aspx page has the same href value ("/NewWebApp/")

我不确定如何转到Home.aspx，然后导航到特定路线.

I'm not sure how to go to Home.aspx then navigate to the specific route.

我的Web.config和Home.aspx位于项目的根目录中.

My Web.config and Home.aspx are in the root directory of my project.

如果可以的话，这是我的路线.

Here's my routes if it helps.

const appRoutes: Routes = [
{ path: 'Home.aspx', redirectTo: 'Home/DailySummary', pathMatch: 'full' },
{ path: '', redirectTo:'Home/DailySummary', pathMatch:'full' },
{
    path: 'Home', component: INHome, children: [
        { path: 'DailySummary', component: DailySummary },
        { path: 'Documents', component: Documents },
        { path: 'Safety',component: Safety},
        { path:'', redirectTo:'DailySummary', pathMatch:'full'}
    ]
},
{path:'**',redirectTo:'Home/DailySummary', pathMatch:'full'}
]

感谢您的帮助.让我知道您是否需要更多信息.

Thanks for your help. Let me know if you need more info.

推荐答案

这与Angular的PathLocationStrategy的工作方式有关. 它会生成漂亮的URL，但会表现出您正在遇到的行为-除非您进行了很多黑客操作，否则用户必须加载应用程序的索引页面以引导应用程序，并因此将书签添加到其他位置(并重新加载)不起作用.

This is an issue with the way Angular's PathLocationStrategy works. It produces nice, pretty URLs, but it exhibits the behavior that you are experiencing - unless you do a bunch of hacking around, the user has to load the app's index page to bootstrap the application, and so bookmarks to other locations (and reloading) doesn't work.

我发现解决此问题的最简单方法是完全避免该问题，并使用文档中所谓的老派"方法-将路由器切换到HashLocationStrategy.您最终会使用诸如 http://mydomain/index.html#somelocation 之类的URL，而不是 http://mydomain/somelocation ，但是用户真的在乎吗?

I find that the easiest way to fix this is to avoid the problem altogether and use what the documentation calls the "old school" method - switch your router to the HashLocationStrategy. You wind up with URLs like http://mydomain/index.html#somelocation instead of http://mydomain/somelocation, but do users really care?

结果是丑陋"的URL正常工作-书签和重新加载工作正常，因为您始终在加载index.html

The result is "ugly" URLs that just work - bookmarks and reloads work just fine, because you're always loading index.html

请参见 https://angular.io/guide/router#browser-url-样式以获取更多信息.

See https://angular.io/guide/router#browser-url-styles for more info.

这篇关于Angular 5 URL重写问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！