- What is Angular JS
- Features of Angular JS
- Angular JS Uses
- Angular JS Advantages and Disadvantages
- Angular JS Modules
- Angular JS DOM
- Angular JS Directives and its Types
- Angular JS Data Binding
- Angular JS Controllers
- AngularJS MVC
- Angular JS Expressions
- What is AngularJS Scope?
- Angular JS Scope Characteristics
- Angular JS Event
- Angular JS Filter
Angular Interview Questions
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.
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 firebaseinit
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.