Search code examples
angularangular-routingserver-side-renderingangular-universal

Angular Server Side Rendering (SSR) not loading html for inner / child pages


I'm experiencing an issue with how my angular app loads. For some reason on viewing the application online regardless of the route, the html structure defaults to the base path.

Now assume in my routing I have 2 pages: home (/) and events (/events).

When I try to use the facebook open graph scrapper or even just simply view-source:https://mysite/events I see the results are that of the homepage (/) instead of the /events

Even more confusing is that

  1. the actual rendered /events html file in the dist directory has the correct html data but on viewing it online or scrapping as mentioned, it shows the homepage html structure
  2. even on loading https://mysite/events on the browser - which shows the intended page correctly, but upon inspecting by ctrl + u, same issue - html structure belonging to the homepage

Does this have anything to do with how angular loads the app or it's something else? How can I go about ensuring the correct html data is picked up by scrappers or even just by viewing the source?

Just in case the routing info might help, here it is:

const routes: Routes = [
  {
    path: '',
    component: SiteLayoutComponent,
    children: [
      {
        path: 'events',
        children: [
          { path: '', component: EventsComponent},
        ]
      },
      { path: '', component: HomeComponent, pathMatch: 'full'},
    ]
  },
  { path: '**', redirectTo: '' }
];

Solution

  • I tested the web application on both my local apache server as well as on another site (which turned out to be using apache) and the routing works fine on both scenarios.

    So the issue turned out to be an nginx configuration that redirected requests to the root index (then on to the requested page) rather than go straight to the sub directory index.

    So if you have a request like site.com/events - on nginx the request would load the main index.html then programmatically load the user's request (/events) whereas on apache it would go straight to the index found in /events

    This explains why scrappers like the open graph scrapper or even ctrl + u would find meta tag data that's in the main index file rather than the events index file