windowobject and other DOM specific APIs. Since we’re on a server and running in NodeJs, we don’t have access to the DOM. This is where Angular Universal and
@ionic/angular-servermodule comes in.
SeoServiceto allow you to change your SEO meta tags dynamically on each route. You can find this service in
SeoServicewill use the default meta tags. Make sure to update this with your own title, description and image.
SeoService.The service will then add the rest of the url path.
ReferenceError: XMLHttpRequest is not definederror. Somehow Angular Universal has issues if the
HttpClientis included in several modules. The solution is to remove
HttpClientModulefrom all lazy and eager loaded feature modules and move its import to the
./assets/sample-data/fashion/listing.json) will be converted to absolute paths and work OK from the server.
initialNavigationproperty of the Angular Router (check the
app-routing.module.ts) for server-side rendering to work.
TransferStateAPI to seamlessly transition between the server side rendered to the browser rendered app.
TransferHttpCacheModule. This module installs an Http Interceptor that avoids doing duplicate requests that were already made when the application was rendered on the server.
TransferStatestrategy you will end up performing an http request in the server, and again, the same request in the browser after transitioning from the server side rendered app.
TransferStateAPI directly (basically a key-value store).
TransferStateHelperservice to help us store data from requests made using our custom
DataStoreutility. We also use this helper service to prevent showing shell elements in SSR to avoid SEO penalties and improve user experience.
TransferStateHelperin all the services for the different category pages.
DataStoreutility to enable loading data without prepending a shell. You can see how we rely on this feature to avoid showing App Shell placeholders when rendering the app in the server in all the services for the different category pages.
TransferStateHelperservice to mark all the images included in the requested view (rendered in the server) and avoid showing loading animations on those images. You can see how we put this in action in the
routerLinkelements and navigation works correctly.
routerLinkclicks aren't supported. You must wait for the full client app to bootstrap and run, or buffer the events using libraries like preboot, which allow you to replay these events once the client-side scripts load.
server.tsfile and the
static-paths.tsfile to configure the server logic that handles missing routes in NodeJs on the
static-paths.tsfile to configure the server redirection logic in NodeJs on the