Serving angular SPA and another index.html from nginx

Question

I have a SPA and serving it from Nginx which works fine. I also have an simple index.html inside a sub-folder.

Spa links to index.html for displaying a sub application which is simple html with it's own css/js. When trying to browse the subfolder app, nginx redirects to the base spa.

nginx config

 location / {              
                try_files $uri $uri/ /index.html =404;
        }

location /3d-viewer/ {
                 try_files $uri $uri/ /3d-viewer/index.html;
        }

Thanks for help.

Have you tried just swapping those rules - moving the `/3d-viewer/` before the "capture all"? Supposedly if it matches the first rule, it will not hit the secon one. — Vladimir Zdenek, May 26 '17 at 12:16
Resolved, Gulp task was merging the index.html with the SPAs index.html and resulting in a 404. — Chirdeep Tomar, May 27 '17 at 09:21
I just want to add that Nginx matches the longest location path. — Shady Atef, Jun 01 '17 at 22:07

score 0 · Answer 1 · answered Aug 11 '22 at 10:26

in angular app config https://angular.io/api/common/APP_BASE_HREF

import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/3d-viewer'}]
})
class AppModule {}

nginx.conf

location /3d-viewer {
  alias /var/www/html/3d-viewer;
  try_files $uri $uri/ /index.html =404;
  expires 0;
  add_header Cache-Control no-cache;
  add_header X-Cache-Status REVALIDATED;
  break;
}

Serving angular SPA and another index.html from nginx

1 Answers1