How to rewrite url with Angular in IIS?

Viewed 418

I have a website in IIS which has two application and as main website an Angular App.

enter image description here

one of the applications is the API beck-end, the second one is a vanilla javascript app.

To reach vanilla JS application i'm have to make a call to www.example.com/v/{code} which will rewrite the /v/ url to /api/v/ which return a PermanentRedirect 301 to /vmenu/ or better the JS Application.

The issue with Angular app hosted at root level is my rewrite rule is ignored and my request to /v/ is not rewrited in /api/v/ so i'm not redirected to my JS application but i'm just stuck in Angular one...

it's looks like this:

enter image description here

While instead of this the request should be processed and the user redirected to /vmenu/..

I've tryed the following rewrite rules but it has no effect..

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Rewrite VMenu" stopProcessing="true">
                    <match url="v/(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$" />
                    <action type="Rewrite" url="api/{R:0}" appendQueryString="false" />
                </rule>
        <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="^/(api)" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(v)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
            </rules>
        </rewrite>
        
        
        
    </system.webServer>
</configuration>

If it could be usefull here is my Angular routing:

const routes: Routes = [
  { path: '*', component: HomeComponent },
  { path: '', component: HomeComponent },
  {
    path: ':piva/:negozio',
    component: NegozioComponent,
    children: [
      {
        path: '',
        component: ModuliComponent,
      },
      {
        path: 'location',
        component: LocationComponent,
      },
      {
        path: 'asporto',
        component: ProductsComponent,
        canActivate: [ItemsGuardService],
        resolve: {
          menu: ProductsResolver,
        },
      },
      {
        path: 'takeaway',
        component: ProductsComponent,
        resolve: {
          menu: ProductsResolver,
        },
      },
      {
        path: 'ecom',
        component: ProductsComponent,
      },
      {
        path: 'item/:id',
        component: ItemComponent,
        resolve: {
          plu: ItemResolver,
        },
      },
    ],
  },
  { path: 'cart', component: CartComponent },
  {
    path: 'checkout',
    component: CheckoutComponent,
    canActivate: [CheckoutGuardService],
  },
  {
    path: 'success',
    component: SuccessComponent,
    canActivate: [SuccessGuardService],
  },
];

By using IIS rewrite tracing, i just doesn't even process the /v/{code} request but the first request is the request to Angular path ':piva/:negozio', which makes a call to api/profilo.

0 Answers
Related