Angular Universal Server-Side Rendering

author-imageBy Dhiraj, 29 July,2018   0K

In this article, we will be discussing about server side rendering of Angular Single Page App(SPA) using node server. For this, we will be using ng-toolkit/universal which adds all the necessary files required for server side rendering of the .html pages. Doing so makes our pages SEO friendly and our Angular based websites can be crawled and indexed by search engines.

While packaging of Angular app, all the HTML, CSS and Javascript code are bundled together and the same is rendered at run-time in the client side by manipulating DOM. Angular uses Webpack as a module bundler which is used as a tool for bundling application source code in small blocks or chunks. The bundle is a JavaScript file which is served to the client in a response to a single file request. Hence, whenever we try to check the source(Ctrl + U) of an angular app, then we see similar result as below:

angular6-js-source

This definitely improves user experience but from SEO perspective it is definitely not SEO friendly. Still, search engines do not have capability of executing JavaScript and the bots find an empty page while crawling. But with server side rendering, actual HTML will be sent as a response for to browser for any request. Hence, in this example we will take a look into using ng-toolkit/universal for server side rendering of Angular App to make it SEO friendly.

In my last articles, we have created many Angular app using Angular 5 as well as Angular 6. Here, we will be using one of our existing Angular 6 app whose complete source code can be found here on GitHub. Also, the below method of server side rendering can be equally used with Angular 5 app.

Adding ng-toolkit/universal in Angular 6 and 5

First, traverse to any folder of your choice and execute following commands to add ng-toolkit.

git clone https://github.com/only2dhir/angular6-sidenav-example.git
cd angular6-sidenav-example
npm install
ng add @ng-toolkit/universal

Adding ng-toolkit/universal, adds following files in our existing Angular app.

1. app.browser.module.ts
2. app.server.module.ts
3. main.server.ts
4. tsconfig.server.json
5. local.js
6. server.ts
7. webpack.server.config.js
universal-added-files

Apart from this NgtUniversalModule from @ng-toolkit/universal is imported in our app.module.ts

app.browser.module.ts module will be used by browser and it bootstraps the application on the client side.

app.server.module.ts module is similar to app.browser.module.ts but it has some other modules imported such as ServerModule from @angular/platform-server, NoopAnimationsModule, ModuleMapLoaderModule, ServerTransferStateModule.

main.server.ts is the entry point for server module.

tsconfig.server.json contains typescript configuration.

server.ts will have configurations for express server which will render application HTML on the server. For all the requests, index.html will be served from folder /dist/browser

Once, this is done let us build our angular app for production by executing below command.

npm run build:prod

Above command will build the app for our production system. This will create 2 folders inside dist folder and they are browser and server. Now, to run this app on production system you can execute following command.

npm run server

Executing above command will print following in the console.

angular6-node-output

Now, you can access the application at localhost:8080 and check the source.

angular6-ssr-source

Deploying Angular App on Cloud with Node For Server Side Rendering

To do so first make sure you have Node installed on the VM. If not installed you can do it as below:

cd /usr/devglan/example
curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -
yum -y install nodejs

You can follow this to install any other version of Node.

Now, run following commands to install pm2 and deploy your app with name sample

sudo npm install pm2 -g
pm2 start --name sample local.js

Useful pm2 commands

pm2 stop all
pm2 restart all

pm2 stop 0             # Stop specific process id
pm2 restart 0          # Restart specific process id

pm2 delete 0           # Will remove process from pm2 list
pm2 delete all     

Conclusion

In this article, we discussed about server side rendering of Angular App using ng-toolkit/universal to make our app SEO friendly.

Further Reading on Angular JS

1. Material Sidenav Example

2. Spring Boot Angular Captcha

3. Rxjs Tutorial

4. Angular Data Table Example

5. Spring Boot Jwt Auth

If You Appreciate What We Do Here On Devglan, You Should Consider: