Issues with Angular 5 URL Rewrite

Question

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>

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

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

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.

Solution

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.

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?

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

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

Comments

[Hassan Faghihi]

thanks for the rule, i have issue to set it up using UI, i was looking for something, we used it in angularjs, and then we marked some path used as API to be ignored, fortunately, here, with angular, with separate API application, i do not even need to do that

[Hassan Faghihi]

PS: BTW i have seperate project for API, and UI (api.x.com & x.com) i even read my static image currently from api.x.com