How to incorporate Angular Universal into a pre-existing Angular 14 application?

edit

To incorporate Angular Universal into a pre-existing Angular 14 application, follow these steps:

1. Install the Required Packages: You need to install some packages that are required to use Angular Universal. Run the following command to install the various packages:

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

1. Add the Server-Side Rendering Files: Create a new folder named server at the root of the project. Then create a new file named server.ts inside the server folder. You also need to create a new file named main.server.ts inside the src folder.

2. Configure the Angular App for Server-Side Rendering: Open the src/main.ts file and add the following lines of code to enable the server-side rendering of the application:

import { enableProdMode } from '@angular/core';
import { renderModule } from '@angular/platform-server';
import { AppModule } from './app/app.module';

enableProdMode();

renderModule(AppModule, {
  document: '<app-root></app-root>',
  url: '/'
}).then(html => {
  console.log(html);
});

1. Configure the server.ts File: Open the server.ts file and add the following code:

import 'zone.js/dist/zone-node';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import * as path from 'path';
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { createServer } from 'http';
import { APP_BASE_HREF } from '@angular/common';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

enableProdMode();

const DIST_FOLDER = join(process.cwd(), 'dist');

const app = express();

const indexHtml = readFileSync(join(DIST_FOLDER, 'browser', 'index.html'), 'utf8');

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

app.use(express.static(join(DIST_FOLDER, 'browser')));

app.use('*', (req, res) => {
  res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }, provideModuleMap(LAZY_MODULE_MAP)] });
});

createServer(app).listen(8000, () => {
  console.log(`Angular Universal Server is listening on port: 8000`);
});

1. Update the package.json File: Open the package.json file and update the scripts section to include the following two commands:

"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"serve:ssr": "npm run build:ssr && node dist/server/server.js"

1. Test the Server-Side Rendering: Run the following command to build the application and then start the server:

npm run serve:ssr

You can then navigate to http://localhost:8000 to view the server-rendered Angular app.