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

Question

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: '' }
];

Answer 1

I think you can use EventComponent route, beside HomeComponent.

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