index.html page, hence no search engine indexing and social snippet previews. To resolve these problems, we need to render HTML code on the server when user or bots make a request for a page.
In Angular, basically
index.html page is served from express server for all the URL paths and that
index.html page is passed through some express view engine which injects HTML into
<app-root></app-root>, based on current route and component for that route.
So in this article, I will explain step by step implementation of server side rendering with some examples. Make sure you have Angular CLI 1.6+ version installed. If you are creating new angular application, then better install new version of Angular CLI with following command
npm install -g @angular/[email protected]
First, we need to create a angular app with routing. Routing is not necessary, but just to show you how server side rendering works for different URLs, we are going to import a routing module. To create a angular app with routing module automatically generated and scss style support, use below command.
ng new angular-ssr-example --style scss --routing
This will create
angular-ssr-example folder, where our angular code will be located. Let’s open that in VS Code or your favourite code editor.
Let’s understand how server side rendering works in practice. Traditionally, we used to serve entire dist folder (technically, only
_index.html_ file from
_dist__ folder_) which contains build files of our angular application. But now, we are going to create a express server which serves
index.html file from