Web designer Blog | web designer

We can optimize the initial loading time of angular application using angular universal (server-side rendering).

Server-Side Rendering also helps in SEO (Search Engine Optimization) and Improving performance on mobile and low powered devices.

The following lesson will show you how to setup Angular Universal with firebase. In addition, you will learn how to deploy the app.

Implement Angular Server Side Rendering with Just One Command

In Angular 9 release, Angular Universal Team came up with a ng add schematic to implement SSR in angular application.

ng add @nguniversal/express-engine

This schematic will add and update all required files to implement server-side rendering in angular application.

This will add the following files :

• src/main.server.ts
• src/app/app.server.module.ts
• tsconfig.server.json
• server.ts

and update the following files :

• angular.json
• package.json
• src/main.ts
• src/app/app.module.ts

Server-Side Rendering on Local System

@nguniversal/express-engine schematic also add the CLI builders to start server-side rendering on the local system and generating production build with SSR.

This schematic adds the following scripts in package.json.

"dev:ssr": "ng run [project_name]:serve-ssr",
"serve:ssr": "node dist/[project_name]/server/main.js",
"build:ssr": "ng build --prod && ng run [project_name]:server:production",
"prerender": "ng run [project_name]:prerender"

Using the following command, We can start rendering our app with Universal on the local system.

npm run dev:ssr

This will serve the angular application with server-side rendered pages on localhost:4200. you can confirm angular universal implementation by looking into the page source.

If you find rendered HTML in the page source, Great !!! angular universal implementation is done.

Deploy Angular Universal App to Firebase

Angular Firebase Team also has added a new feature in ng add @angular/fire.

While you add the @angular/fire using ng add, it will check whether the current project is an angular universal project, if yes it will ask the following question.

We detected the Angular Universal Project, Do you want to deploy it as a Firebase Function?

If you enter y/yes here, it will install some more packages to implement firebase cloud functions to deploy angular universal project.

Once Firebase installation is done we can deploy our angular universal project to firebase using just ng deploy command.