Angular Server Side Rendering - [Angular 5 and 4]

This guide showed you how to take an existing Angular application and make it into a Universal app that does server side rendering.

It also explained some of the key advantages for doing so.

1. Facilitate Web Crawlers (SEO)

2. Support low-bandwidth devices

3. Support low-power devices

4. Fast first page load

ü Stayed Informed – Angular 5 and Angular 4 documentation and example

Angular Universal can greatly improve the perceived start-up performance of your app. To make a Universal app, you install the “platform-server” package and it has server implementations of the DOM, XMLHttpRequest and other low-level features that don’t rely on a browser.

To get started, Install these packages -

1. Universal server side components - @angular/platform-server

2. For handling lazy-loading in the context of a server-render - @nguniversal/module-map-ngfactory-loader.

3. An express engine for Universal applications - @nguniversal/express-engine.

4. To transpile the server application - ts-loader.

Install, using below commands -

npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine

After executed above commands the “package.json” looks like –

{

"dependencies": {

"@angular/animations": "^5.2.0",

"@angular/common": "^5.2.0",

"@angular/compiler": "^5.2.0",

"@angular/core": "^5.2.0",

"@angular/forms": "^5.2.0",

"@angular/http": "^5.2.0",

"@angular/platform-browser": "^5.2.0",

"@angular/platform-browser-dynamic": "^5.2.0",

"@angular/platform-server": "^5.2.4",

"@angular/router": "^5.2.0",

"@nguniversal/express-engine": "^5.0.0-beta.5",

"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",

"core-js": "^2.4.1",

"ngx-cookie-service": "^1.0.10",

"rxjs": "^5.5.6",

"ts-loader": "^3.5.0",

"zone.js": "^0.8.19"

}

And the App Module looks like –

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ServerModule } from '@angular/platform-server';

import {DateServiceService} from '../app/date-service.service';

import { AppComponent } from './app.component';

import { UserComponent } from './user/user.component';

import { BillComponent } from './bill/bill.component';

import {BillService} from '../app/bill.service';

import {AuthService} from '../app/services/auth.service';

import { CookieService } from 'ngx-cookie-service';

import { AppModule } from './app.module';

@NgModule({

declarations: [

AppComponent,

UserComponent,

BillComponent

imports: [

BrowserModule,

AppModule,

HttpModule,

ServerModule,

FormsModule,

ReactiveFormsModule,

RouterModule.forRoot([

{

path:'app-user', component : UserComponent

{

path:'app-bill', component : BillComponent

}

])

providers: [DateServiceService, BillService, CookieService, AuthService],

bootstrap: [AppComponent]

})

export class AppServerModule { }

Noted Point - Imports first the client “AppModule”, and then “ServerModule” and then “ModuleMapLoaderModule”. The “ModuleMapLoaderModule” is a server side module that allows lazy-loading of routes.

I hope you are enjoying with this post! Please share with you friends. Thank you so much!