Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

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.

Angular 8 universal

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:

  1. Open the chrome Dev Tools and go to the Network tab.
  2. Find the Network Throtting dropdown on the far right of the menu bar.
  3. 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>
Add Angular Universal

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

  1. We need to add export in front of app variable
Make changes in server.ts
  • We need to comment on the listening of our app, which is typically at the end of server.ts file.
comment on the listening of our app

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

library target as umd in web pack configuration

Step 4: Initialize and configure firebase

In this level, we first need to install firebase tools in our system.

first need to install firebase tools

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 
firebase
a firebase hosting
we have firebase in our angular project

Once, we have firebase in our angular project, and we need to make some changes in our firebase.json file.

we need to make some changes in our firebase.json file

We have to change the rewrite property in it.

change the rewrite property

“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.

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

deploy the firebase function

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.



ADVERTISEMENT
ADVERTISEMENT