window
object 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-server
module comes in.SeoService
to allow you to change your SEO meta tags dynamically on each route. You can find this service in src/app/utils/seo/seo.service.ts.
SeoService
will use the default meta tags. Make sure to update this with your own title, description and image.canonicalUrl
from the SeoService.
The service will then add the rest of the url path. ReferenceError: XMLHttpRequest is not defined
error.
Somehow Angular Universal has issues if the HttpClient
is included in several modules. The solution is to remove HttpClientModule
from all lazy and eager loaded feature modules and move its import to the app.module.ts
file../assets/sample-data/fashion/listing.json
) will be converted to absolute paths and work OK from the server.initialNavigation
property of the Angular Router (check the app-routing.module.ts
) for server-side rendering to work.TransferState
API 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.TransferState
strategy 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.TransferState
API directly (basically a key-value store).TransferStateHelper
service to help us store data from requests made using our custom DataStore
utility.
We also use this helper service to prevent showing shell elements in SSR to avoid SEO penalties and improve user experience.TransferStateHelper
in all the services for the different category pages.DataStore
utility 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.TransferStateHelper
service 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 <app-image-shell>
component.routerLink
elements and navigation works correctly. routerLink
clicks 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.angular/preboot
in this product. But, It's a pretty straightforward process you can do on your own.server.ts
file and the app.module.ts
(through the APP_INITIALIZER
utility).static-paths.ts
file to configure the server logic that handles missing routes in NodeJs on the server.ts
file.static-paths.ts
file to configure the server redirection logic in NodeJs on the server.ts
file.server.ts
file.