CODEWITHSUNDEEP
angulariis
Ahmer Khan
Ahmer Khan

Reputation: 767

IIS is giving 404 - File or directory not found error on my Angular application route

I have made a deployment of my angular application which was working fine previously, but when i put the inside component of the application to the root module and trying to access it from the top of the application its throwing this error on IIS.

Here is my routing file for angular:

export const routes: Routes = [
  { path: 'enable-cookies', component: EnableCookiesComponent },
  { path: 'not-found', component: NotFoundComponent },
  { path: 'lock-screen', component: LockScreenComponent, canLoad: 
    [RestrictPathGuard] },
  { path: 'booking-detail/:id/:id2', loadChildren: 
     './public/public.module#PublicModule'},
  { path: '', loadChildren: 'app/components/pages.module#PagesModule', 
    canActivate: [UserProtectionGuard] },
  { path: '**', redirectTo: 'not-found' }
  ];

In the above routes the path booking-detail/:id/:id2 is giving me the 404 error, the other paths are working fine.

I have also my url rewrite file in web.config below:

<?xml version="1.0" encoding="utf-8"?>
<configuration>

 <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" />
    </conditions>
    <action type="Rewrite" url="./index.html" />
  </rule>
</rules>

Is there anything I am missing or doing it not properly ?

Below is my url which I am trying to access.

http://10.1.1.1:7070/booking-detail/MTk2NnwxMDR8U0VBfEdVRVNU/Dm9duQS%2fI%2fZSLdXyQTyLVZUNRjuTxRjXhGUxecdVifZh%2fhk6cWKIH6chi5pQgr6e3HQ296gGFgRE%2fkpFoW95YgsFCWQuSdeKk79iPFi9RW1RFQfZ4Zr%2fQYZ40r0q%2bzBuDZmVrrxU39Ayn9nGP5%2fNbD7219uff8K5cwsTYkhqxNDjbfZ5SHcPiPXvdyRkDnFpXzsmNq0TjOAPIBqsRkVilmFCWI6tYCxx4brwKO7Acy1EE8TD3p9U6BS%2fZLhZikFkiAhHUKVw8ImLGhctp5TDfg3BIYHMQ7Rj4BEYnEEdpxxRP%2fgB3g%2bvRB4l8sCgJSCc4SVrQIb68lXttzfyEDLLJIzmCVdRDoCnRUqRMuJWSzXQ5m0vcvEhP1p%2bpdSp7OwJQag82YlO%2fv0lIkrSvrMih4auBjEv64%2fFJfYJ7dK%2fGOmBHuh5ET7du13kpKql7k39LrRR4BkzQS4cCswuD8PS6w%3d%3d

Here is the routing of PublicModule

export const routes: Routes = [
{
    path: '',
    component: PublicComponent,
    children: [
        { path: '', component: ViewBookingComponent},
    ]
}

];

Upvotes: 4

Views: 7855

Answers (3)

Blaise
Blaise

Reputation: 22202

For IIS, add a rewrite rule in Web.config.

Just place the Web.config in the root folder of the application.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularRewrite" 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="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

If you are unfortunate and cannot add that Web.config, use HashLocationStrategy as the last resort.

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

Upvotes: 3

Kardon63
Kardon63

Reputation: 336

I was getting the same error in chrome but then I tried to open it in firefox and the actual error was that the iis was configured to disable double escape sequence so I set configured the requrest filtering to allow double escaping

<security>
            <requestFiltering allowDoubleEscaping="true" />
</security>

and then it works, but be aware of the security holes that this solution will add

Upvotes: 0

SGalea
SGalea

Reputation: 722

Replace

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

with

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

Upvotes: 1

Related Questions