Implementando Angular Universal

How to configure Universal in Angular?

The Angular Universal configuration allows applications to run on the server using Node.js and Express to provide SSR (Server Side Rendering). This improves the load time and SEO of applications. Here's how to do it with simple commands and how to troubleshoot possible problems that may arise during the process.

Do I need official documentation?

Before performing any configuration, it is highly recommended to consult the official Angular documentation to fully understand the required steps and available features. This documentation will guide you through the process and make sure you do it correctly without forgetting crucial steps.

How to install Angular Universal?

1. Install Angular Universal: Angular facilitates the configuration through a command that automates most of the process. This command takes into account Angular's structure and guidelines to generate a Node.js server in Express that will serve the application's files.

   ng add @nguniversal/express-engine

   When running this command, be sure to replace <project-name> with the actual name of your Angular project.

2. Stop the development server: Before proceeding, make sure your development server is stopped to avoid conflicts.

3. Execute the command in the terminal: Use the name of your project that is configured in Angular to execute the command:

   ng add @nguniversal/express-engine --clientProject <project-name> .

What modifications does Angular make?

When the command is executed, Angular performs several automatic modifications:

• Generates a Node.js server in Express.
• Configures the necessary changes to the angular.json file.
• Creates tasks in the NPM scripts in order to build and serve the application.

In Visual Studio Code, you can easily visualize which files were created or modified after the command execution.

How to resolve common errors?

Sometimes, errors can occur when trying to run the project with Universal, such as failed unit tests or references to elements that only exist in the browser. If the build fails, it is most likely an issue with unit tests or client-side dependencies.

1. Errors with unit tests: If unit tests fail, you can temporarily comment out the related code to continue development, although it is suggested to look for a thorough solution later.

2. Browser references on the server: Errors such as direct references to window, document or browser-only elements need to be handled properly. Angular Universal provides classes to dynamically determine the execution environment and adapt the code accordingly.

How do we know when we are in a browser or server environment?

Angular provides classes that allow us to "intercept" different moments of code execution to adapt it according to the environment:

• IS_PLATFORM_BROWSER: This function helps determine if the code is running in the browser.

  import { isPlatformBrowser } from '@angular/common';import { PLATFORM_ID } from '@angular/core';
  constructor(@Inject(PLATFORM_ID) private platformId: Object) { if (isPlatformBrowser(this.platformId)) { // Execute browser-specific logic }}

• IS_PLATFORM_SERVER: This function lets you know if code is being executed on the server.

Learning and applying these techniques is crucial to manage robust applications that use Angular Universal effectively, ensuring correct SSR and smooth interaction between server and client.