Quick Contact

    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.

    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&&npmserve: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 () 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

    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.

    Copyright 1999- Ducat Creative, All rights reserved.