Angular Universal

Angular Universal is a technology that allows you to perform server-side rendering (SSR) of your Angular applications. This guide covers the basics of setting up and using Angular Universal to enhance the performance and SEO of your Angular applications.

Setting Up Angular Universal

First, ensure that your Angular application is set up to use Angular Universal by adding the necessary dependencies:

ng add @nguniversal/express-engine

Configuring Angular Universal

After adding Angular Universal, update your application to use the Express engine for SSR:

// server.ts
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

const app = express();

const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', distFolder);

app.get('*.*', express.static(distFolder, {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

const port = process.env.PORT || 4000;
app.listen(port, () => {
  console.log(`Node Express server listening on http://localhost:${port}`);
});

Updating Angular Configuration

Update the angular.json file to include server and browser configurations:

// angular.json
{
  ...
  "projects": {
    "app": {
      ...
      "architect": {
        "build": {
          ...
        },
        "serve": {
          ...
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "tsconfig.server.json"
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "app:build:production",
            "serverTarget": "app:server:production",
            "routes": ["/"]
          }
        }
      }
    }
  }
}

Creating Server Module

Create a server module to handle the server-side rendering:

// app.server.module.ts
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 {}

Modifying Main Server Entry Point

Modify the main server entry point to bootstrap the server module:

// main.server.ts
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';

Running the Application

Build and run the Angular Universal application using the following commands:

ng build --prod
ng run app:server
node dist/server

Key Points

Conclusion

Angular Universal enhances the performance and SEO of your Angular applications by enabling server-side rendering. By setting up Angular Universal, configuring the Express engine, and running your application, you can provide a better user experience and improve search engine visibility. Happy coding!