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!