Skip to main content

Server-side Rendering with Angular Universal

Angular Universal is a technology that enables us to run Angular applications on a server. This is a crucial aspect in the development of Angular apps as it enables us to render the application on the server-side, which in turn, significantly improves the performance of the app, especially on slow networks.

This article will guide you through the process of rendering an Angular application on the server-side using Angular Universal. It is structured in a way to make the topic easy to understand, even for beginners.

What is Angular Universal?​

Angular Universal is an Angular tool that allows developers to run Angular applications on the server. This is especially useful for improving performance and making Angular applications SEO friendly.

Why Use Angular Universal?​

There are several reasons why you'd want to use Angular Universal:

  1. Performance: By rendering the application on the server, we can deliver the application faster to the user. This is especially useful for users on slow networks.
  2. SEO: Search engines can crawl your app more easily because your application is already rendered when they access it.
  3. Social sharing: When your URL is shared on social media, the link preview is generated using server-side rendering.

How to Set Up Angular Universal?​

Before we start, make sure you have Angular CLI installed. If not, you can install it by running npm install -g @angular/cli.

First, go to your project root and run the following command to add Angular Universal to your application:

ng add @nguniversal/express-engine

This will set up the necessary configuration for server-side rendering.

Creating a Server-Side App Module​

Next, we need to create a server-side app module app.server.module.ts. This module will be used to bootstrap our application on the server. It should import the AppModule and ServerModule from @angular/platform-server.

Here is an example of an app.server.module.ts file:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Running the Application​

Now that we have our server-side app module, we can run our application on the server. Use the following command to build the application for server-side rendering:

ng run [project-name]:server

Replace [project-name] with the name of your project.

After building, you can serve the application with:

npm run serve:ssr

Now, if you navigate to http://localhost:4000, you should see your application rendered from the server.

Conclusion​

In this guide, we learned about server-side rendering with Angular Universal. We discussed what Angular Universal is, why you should use it, and how to set up and run your application with server-side rendering.

While server-side rendering with Angular Universal is a more advanced topic, it is a powerful tool in improving the performance of your Angular applications, making them SEO friendly, and enhancing the social sharing capabilities.

Remember, practice is the key to mastering any concept. Therefore, make sure to apply what you've learned in a real project to fully grasp the concept of server-side rendering in Angular Universal.

Happy coding!