We have migrated an Angular app from Firebase to nginx server. All is well, except we have a problem with routing. For example, all non-existing subfolders are caught by Angular and routed. This is OK, but the thing that puzzles me is that I have set up nginx configuration to intercept some of the subfolders, but apparently the nginx configuration is somehow skipped if you ever opened our angular app before. We do use ServiceWorker in our app if that matters.

For example. We have an URL: /subfolder. This is our nginx configuration:

location /subfolder {
    rewrite ^/subfolder$  redirect;
}

I tried various online examples like location ~ /subfolder, location ^/subfolder, location ^/subfolder(|/)$, etc.. None worked. And this is in Angular router (abbreviated):

const routes: Routes = [
  {
    path: 'auth',
    loadChildren: () => import('./pages/authentication/authentication.module').then(m => m.AuthenticationModule),
  },
  {
    path: '',
    component: LayoutComponent,
    canActivate: [AuthorizationService],
    canActivateChild: [AuthorizationService],
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: '/home'
      },
      {
        path: 'home',
        loadChildren: () => import('...').then(m => m.SomeModule),
      },
      {
        path: '**',
        pathMatch: 'full',
        redirectTo: '/home'
      },
    ]
  }
];

Now, since I already opened our Angular app and then try to navigate to /subfolder, I'm always redirected to /home. If I open this link directly, the same happens. If I open an incognito mode, then I can visit this URL. But if I open our angular app in incognito and then try to navigate to /subfolder, I'm always redirected to /home.

I do know that in Angular routing, the path: '**' means to redirect all non-existing URLs to redirectTo, but I'm not exactly clear why the redirect I set in nginx is not taking precedense over Angular routing. Isn't it that the HTTP request first hits the nginx server and it responds with either redirect or angular app? What am I missing?

UPDATE After a lot more of digging around, concluded that the issue is Angular's Service Worker. Despite I tried few options found on this site as well, none worked, but then ChatGPT mentioned a thing that could work, so I updated my ngsw-config.json with "dataGroups", where I excluded all subfolders I needed to ignore. The routes are still being intercepted by SW, I couldn't find a way around it, but at least this time it calls nginx server and forwards a response. Bottom line is that it works.

Example from ngsw-config.json:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "dataGroups": [
    {
      "name": "redirections",
      "urls": [
        "/subfolder",
        "/subfolder/**",
        ...
      ],
      "cacheConfig": {
        "maxSize": 0,
        "maxAge": "0u",
        "strategy": "freshness"
      }
    }
  ],
  ...
}

Despite the official documentation (/ecosystem/service-workers/config) claims that ** is enough and it should catch both variations of URL, (with last slash and without), that was not the case, I needed to add both into configuration file. And yes, I tried:

• /subfolder
• /subfolder**
• /subfolder/**