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

Question

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},
    ]
}

];

can you add the routing of PublicModule to the question ? I do not think it is an IIS issue, given you managed to get it deployed before however rewrite should be url="/" and base href='/' your issue is angular with routing. — SGalea, Aug 08 '19 at 11:01
I've tested with this routing structure and it is working and I'm running out of ideas without seeing things for myself. What I would suggest is adding a button and see if through angular routing works versus URL direct access. Also open the deployed web.config and index.html in a text editor and see if it is what you intend to deploy if you are using some deployment automation. (can never be too sure) — SGalea, Aug 08 '19 at 11:34

score 1 · Answer 1 · answered Aug 08 '19 at 10:42

1

Replace

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

with

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

answered Aug 08 '19 at 10:42

SGalea

712
9
18

Are you deploying in some subfolder under some url ? – SGalea Aug 08 '19 at 10:45
Yes I am deploying under a subfolder named UI. – Ahmer Khan Aug 08 '19 at 10:46
– SGalea Aug 08 '19 at 10:47
Was this working before when you deployed or it was working only on localhost ? Urls shouldn't be longer than 255 characters. But still the issue you have is unrelated to this. – SGalea Aug 08 '19 at 10:58
Yes It was working fine before, but when i added another module to route which is booking-detail, its started giving error on that particular route but on other routes its still working fine – Ahmer Khan Aug 08 '19 at 11:14
ok I just to be sure about something after domain.com/placeholder/booking-detail... in the place of placeholder. Is there something? – SGalea Aug 08 '19 at 11:15

score 1 · Answer 2 · answered Jul 10 '21 at 01:05

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

score 0 · Answer 3 · answered Jun 22 '21 at 08:04

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

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

3 Answers3