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
/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 structurehttps://mysite/events
on the browser - which shows the intended page correctly, but upon inspecting by ctrl + u
, same issue - html structure belonging to the homepageDoes 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: '' }
];
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