python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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';

@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!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions