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 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..
|
![Angular Server Side Rendering - [Angular 5 and 4]](https://3.bp.blogspot.com/-3kH4diCaMbY/WoF63jdY2GI/AAAAAAAARzw/T0ri_F2Zmng2uPPsQq4MTh6wSM3TRujLQCLcBGAs/s72-c/Angular%2BUniversal-%2Bserver-side%2Brendering-%2BWeb%2BCrawlers.jpg)