Blogs

Converting an Angular Application to Angular Universal for Server-Side Rendering (SSR) [2025 latest]

Published on July 26, 2023

By ToolsGuruHub

Introduction

Angular Universal is a powerful feature provided by the Angular framework that enables server-side rendering (SSR). SSR improves the performance and search engine optimization (SEO) of your Angular application by rendering pages on the server and sending them to the client as fully formed HTML pages. This article will guide you through the process of converting a regular Angular application into an Angular Universal application with SSR.

Add Angular Universal

Add Angular Universal to your project using the ng add command:

ng add @nguniversal/express-engine

When you run the ng add @nguniversal/express-engine command, it will add the necessary packages and create the required files to enable Angular Universal with Server-Side Rendering in your Angular project.

Here’s what the command does:

  • Install Packages:
    • @nguniversal/express-engine: This package provides the Angular Express Engine, which is responsible for server-side rendering.
    • @angular/platform-server: This package contains the server-side rendering utilities for Angular.
  • Update angular.json: The ng add command will modify the angular.json file to include server-specific configurations, such as the output directory for server build and the main entry file for server-side rendering.
  • Create Server-Side Rendering Files:
    • server.ts: The main entry point for server-side rendering. This file will be created in the root of your project and contains the server-side rendering logic.
    • app.server.module.ts: This file will be created in the src/app directory and contains the server-specific version of your app module.
  • Update src/main.ts: The ng add command will modify the src/main.ts file to enable server-side rendering during the application bootstrap process.

By running the ng add @nguniversal/express-engine command, Angular CLI automates the process of setting up Angular Universal for Server-Side Rendering, reducing the manual configuration required from the developer. After running this command, you can proceed to build and run your Angular Universal application with SSR support.

Build and Run the Application

Now, build and run the application with the following commands:

npm run dev:ssr

This command builds and runs the Angular Universal application in development mode with server-side rendering (SSR).

The development server listens on a specific port (usually 4000 or 4200) and renders the Angular app on the server-side, providing improved performance and SEO benefits.

npm run build:ssr

npm run serve:ssr

When converting an application to Angular Universal, there are certain precautions you should take to ensure a smooth transition and avoid potential issues. Here's a list of important points to consider:

  • Third-party Libraries: Some third-party libraries may not be compatible with server-side rendering. Before adding them to your project, check if they support Angular Universal or have alternative solutions for SSR.
  • Browser-Specific Code: Code that depends on the browser's environment (e.g.window, document, localStorage) won't work on the server-side. Use Angular platform-specific APIs (isPlatformBrowser, isPlatformServer) to handle platform-specific code.
  • DOM Manipulations: Avoid direct DOM manipulations in your components, as the server-side rendering environment doesn't have access to the DOM. Use Angular data-binding and templates for DOM updates.
  • Caching: Be cautious when caching SSR pages, especially if they contain user-specific data. Improper SSR caching might lead to privacy or security issues.
  • Routing: Ensure that your application's routing works consistently in both client-side and server-side rendering modes.
  • Assets and File Paths: Ensure that all assets (images, fonts, etc.) have proper file paths, considering both client and server environments.
  • External Scripts: If your app relies on external scripts (e.g., analytics, tracking), ensure they work in the SSR context or consider deferring their execution.

Conclusion

By using the ng add command, Angular CLI takes care of the setup for Angular Universal with Server-Side Rendering (SSR). This automation streamlines the process and ensures that the necessary configurations are correctly implemented.

With SSR in place, your Angular application will enjoy search engine optimization (SEO), improved performance, and a better user experience. Be sure to test your application to confirm it works as expected in both client-side and server-side rendering modes.

Happy coding! 🚀