CODEWITHSUNDEEP
angulariisurl-rewritingrouter
Geko
Geko

Reputation: 33

Angular4+ router redirects to home page in IIS

I've been learning Angular 4+ since few weeks.

I created a web application that works just fine in dev mode, but when I first tried to deploy the application in IIS, I got stuck because of the well known

404 page not found

error when typing an address directly from the browser's address bar.

I applied the solution described in various threads as this one.

My application's base href is "/ePortal/" and my main app routes are defined as follow:

export const appRoutes: Routes = [
   { path: 'login', component: LoginComponent },
   { path: 'logout', component: LogoutComponent },
   { path: '', redirectTo: '/publicarea', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
];

I then have a child route defined as:

const publicAreaRoutes: Routes = [{
   path: 'publicarea',
   component: PublicAreaComponent,
   children:[
      { path: 'events', component: EventsComponent},
      { path: 'comunicazioni', component: ComunicazioniComponent},
   ]
}];

The problem is that if I try to navigate using the address bar to:

http://localhost/ePortal/publicarea/events

I keep getting redirect to

http://localhost/ePortal/publicarea

As I said before, the application works just fine in dev, the problem is probably due to the combination of IIS rule rewrite I used to fix the 404 Page not found error from above and the Route redirecting to publicare when the path is ''

{ path: '', redirectTo: '/publicarea', pathMatch: 'full' },

This is the web.config file i'm using:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
   <system.webServer>
      <rewrite>
         <rules>
           <rule name="angularjs 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="^/$" negate="true"/>
              </conditions>
              <action type="Rewrite" url="/ePortal" />
           </rule>
        </rules>
     </rewrite>
  </system.webServer>
</configuration>

Any suggestion on how to fix this? Am i missing something? Many thanks

Upvotes: 1

Views: 1853

Answers (2)

WeWereTwo
WeWereTwo

Reputation: 46

Probably all you need to do is change

<action type="Rewrite" url="/ePortal" />

to 

<action type="Rewrite" url="/ePortal/index.html" />

When you redirect to the root it will drop the end of the url, you need to bring in the indexfile straight up.

Here is good info about this issue: https://gingter.org/2017/03/20/deep-link-angular-spa-iis/

Upvotes: 3

Roberto Zvjerković
Roberto Zvjerković

Reputation: 10137

You should be using HashLocationStrategy when deploying to IIS.

https://angular.io/api/common/HashLocationStrategy

Look up this question if you want otherwise.

Upvotes: 0

Related Questions