Angular 5 and 4 - Event Binding Example

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

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';

  declarations: [
  imports: [
        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!

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog -
My Books - Book 1 and Book 2

Angular Server Side Rendering - [Angular 5 and 4] Angular Server Side Rendering - [Angular 5 and 4] Reviewed by Anil Singh on 3:31 AM Rating: (5) Powered by Blogger.