Angular Universal is a powerful tool that allows developers to create server-side rendered (SSR) applications using the Angular framework. With SSR, applications are rendered on the server and then sent to the client, resulting in a faster initial page load and improved search engine optimization (SEO). In this step-by-step guide, we'll walk you through the process of implementing Angular Universal in your Angular application.

Prerequisites

Before we get started, there are a few prerequisites that you'll need to have in place:

• An existing Angular application

• Node.js version 14 or higher installed on your machine

• Angular CLI version 12 or higher installed globally

• Basic knowledge of Node.js and Angular

Step 1: Installing Dependencies

The first step is to install the dependencies required for Angular Universal. You'll need to install the following packages:

npm install --save @nguniversal/express-engine @nguniversal/module-map-ngfactory-loader express

• ​​​`@nguniversal/express-engine`: This package is the rendering engine for Angular Universal.

• `@nguniversal/module-map-ngfactory-loader`: This package is used to lazy-load modules in your application.

• `express`: This package is a lightweight web server that we'll use to serve our application.

Step 2: Adding Universal to Your Application

The next step is to add Universal to your application. You can do this using the Angular CLI:

ng add @nguniversal/express-engine --clientProject your-project-name

This command will install the required dependencies and create the necessary files for Universal. It will also update your `angular.json` file to include a new configuration for server-side rendering.

Step 3: Building Your Application

Now that we've added Universal to our application, we can build it for server-side rendering. To do this, we'll use the Angular CLI:

ng build --prod && ng run your-project-name:server:production

This command will build your application in production mode and create a server bundle that can be used for server-side rendering.

Step 4: Creating a Server File

The next step is to create a server file that will use the server bundle we just created. Create a new file in the root directory of your project called `server.js`. Here's an example of what this file might look like:

const express = require('express');
const { ngExpressEngine } = require('@nguniversal/express-engine');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/your-project-name-server/main');

const app = express();

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', 'dist/your-project-name/browser');

app.get('*.*', express.static('dist/your-project-name/browser', {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', {
    req,
    res
  });
});

app.listen(3000, () => {
  console.log(`Listening on http://localhost:3000`);
});

This file sets up an Express server and configures it to use the `ngExpressEngine` engine from the `@nguniversal/express-engine` package. It also uses the `provideModuleMap` function from the `@nguniversal/module-map-ngfactory-loader` package to lazy-load modules in our application. Finally, it sets up some routes to serve our static assets and render our application.

Step 5:Starting Your Server

The last step is to start your server by running the following command in your terminal:

node server.js

This will start your server on port 3000. You can access your application by navigating to `http://localhost:3000`.

Conclusion

Implementing Angular Universal for server-side rendering is a powerful way to improve your application's performance and SEO. By following this step-by-step guide, you can easily add server-side rendering to your existing Angular application. With the right setup and configuration, you'll be able to serve fast and responsive content to your users and improve your application's overall accessibility.

There are many startups that are using Angular Universal to improve the SEO and performance of their web applications.

Scrrum Labs is the leading software development company in Delhi and an IT service provider specializing in Mobile App Development, Software Development, UI UX Design, Artificial Intelligence, and Digital Marketing.

Our technological expertise, excellent delivery, and passionate team have earned us a reputation as one of the best mobile app development and software development companies in Delhi, India. As a result of our global experience, we have a better understanding of what constitutes successful and high-quality software across all industries.​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​