Angular 8 universal
Angular 8 universal
Angular Universal is a technology that allows server-side rendering for Angular apps. An angular app is a single-page app, and it runs in a client-side browser. Rendering pages in the DOM is a response to the user reaction.
Angular Universal executes in the server, generating static application pages that get bootstrapped on the client. This means that the application renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
We can easily prepare an app for server-side rendering using the Angular CLI. The CLI scematic @nguniversal/ express-engine performs the required steps, as described below.
Universal tutorial
The Tour of Heroes tutorial is the foundation for this walkthrough. In this example, the app with the Ahead-of-Time (AoT) compiler. A Node Express web server compiles HTML pages with Universal based on clients requests.
To create the server-side app module, app.server.module.ts, run the following CLI command.
ng add @nguniversal/express-engine --clientProject angular.io-example
The command creates the following folder structure.
src/index.html app web page main.ts bootstrapper for client app main.server.ts * bootstrapper for server app style.css styles for the app app/ ... application code app.server.module.ts * server-side application module server.ts * express web server tsconfig.json TypeScript client configuration tsconfig.app.json TypeScript client configuration tsconfig.server.json * TypeScript server configuration tsconfig.spec.json TypeScript spec configuration package.json npm configuration webpack.server.config.js * webpack server configuration
The files marked with * are new and not in the original tutorial sample.
Universal in Action
To start rendering our app with universal on our local system, use the following command.
npm run builds:ssr && npm serve:ssr
open the browser and transform it to http://localhost:4000/. We can get familiar with the Tour of Heroes dashboard page.
Navigation via routerLinks works correctly because they use the native anchor (<a>) tags. We can go from the Dashboard to the Dashboard to the Heroes page and back. We can click a hero on the Dashboard page to display its Details page.
We can simulate a slower network to see the translation more clearly as follows:
- Open the chrome Dev Tools and go to the Network tab.
- Find the Network Throtting dropdown on the far right of the menu bar.
- Try one of the “3G” speeds.
Why we use server-side rendering?
There are mainly three main reasons to create a Universal version of our app.
- Facilitate web crawlers by search engine optimization (SEO)
- Improve performance on mobile and the low-powered devices.
- Show the first page with a first-contentful paint (FCP)
Universal web servers
A universal web server receives to application page requests within static HTML redered by the universal template engine. The server responds to HTTP requests from the clients (like browsers), and server static assets such as scripts, CSS, and images.
Universal applications use the Angular platform-server package, which provides server implementations of the DOM, XMLHttpRequest, and other low-level features.
The renderModuleFactory() function takes as inputs in a template HTML page (usually index.html), an Angular module containing components, and a route that determines which components we have to display. The route comes from the client request to the server.
Each request results in the appropriate view for the requested route. The renderModuleFactory() function renders the view within the <app> tag of the template, creating a finished HTML page for the client.
Step 1: Add Angular Universal
First, we have to add universal angular support to our angular application for that we will run one cmd.
ng add @nguniversal/express-engine –clientProject<project name>
Once it is done, we will see numerous changes in our project to know more about this transition visit Angular universal official
Step 2: Make changes in server.ts
Next step is to make changes in our server.ts
- We need to add export in front of app variable
- We need to comment on the listening of our app, which is typically at the end of server.ts file.
Step 3: Export our app as a library
Now we need to export our app as a library with a library target as umd in web pack configuration typically its name is webpack.server.config.js
Step 4: Initialize and configure firebase
In this level, we first need to install firebase tools in our system.
Then, we need to login into firebase from our cli
And then, we will initialize a firebase hosting in our project
Npm g firebase-tools Once the above cmd succeeds firebase login firebase init
Once, we have firebase in our angular project, and we need to make some changes in our firebase.json file.
We have to change the rewrite property in it.
“function”:”angularUniversalFunction”
Step 5: Build our project
npm run build:ssr
the above cmd has generated a dist folder which has three things in it a browser folder and serve.js file in our system.
Step 6: Automate the build folder movement
We need to copy the build folder form the root project to the functions folder for the Smartcodehub.
npm i --save fs-extra
after the cmd, we will create one file and name it movedist.js, and the content will be
const fs = require('fs-extra');
(
async()=>{
const src = './dist';
const dist = './functions/dist';await fs.remove(dist);
await fs.copy(src,dist);
}
)()
The above function will copy the dist from the root and paste it into functions folder.
Step 7: configure our primary firebase function
In thisa step, we need to set up our primary firebase function which is in the functions folder src directory and the filename is index.ts.
import * as functions from 'firebase-functions';const universal = require(`${process.cwd()}/dist/server`).app;export const angularUniversalFunction = functions.https.onRequest(universal);
Step 8: deploy the firebase function
Rebuild our project
Npm run build: ssr
Node movedist.js
cd functions
Firebase deploy
SPAs have many advantages above old traditional apps like:
- The client is the responsibility of doing the most rendering. For the server, its primary role is serving the app files into the client.
- No page refresh
- No need for reaching the server for every action.
- Easy navigation between different pages.
- Improved performance.
- No special request of the server to load new pages.
- User-friendliness etc.
We call Universal apps, which SPAs with server-side rendering.