Angular Universal + Nebular Theme

A Server-Side Rendering (SSR) starter project built with Angular 21 and the Nebular UI Theme. Based on the Angular Tour of Heroes tutorial, extended with SSR and a beautiful Nebular component library.

Features

• ⚡ Angular 21 — Latest Angular with full SSR support
• 🎨 Nebular Theme 17 — Rich UI component library with theming
• 🖥️ Angular Universal (SSR) — Server-side rendering via @angular/ssr and Express
• 🦸 Tour of Heroes — Angular's iconic tutorial app as a demo
• 🔁 Lazy Loading — Code-splitting for the Nebular sample page
• 🛠️ TypeScript 5.8 — Full strict-mode TypeScript

Prerequisites

• Node.js >= 20 (LTS recommended)
• npm >= 10

Getting Started

1. Clone the repository

git clone https://github.com/ehsanshrz/angular-universal-nebular-theme.git
cd angular-universal-nebular-theme

2. Install dependencies

npm install

3. Run the development server

npm start
# or
npx ng serve

Navigate to http://localhost:4200. The app will automatically reload on file changes.

Building for Production (with SSR)

Build the client and server bundles together:

npm run build:ssr

Output is placed in dist/angular-universal-nebular-theme/:

• browser/ — Static assets served to the client
• server/ — Server-side Node.js bundle

Running the SSR Server

After building, start the Express server:

npm run serve:ssr

Navigate to http://localhost:4000.

Development SSR Server

Run the SSR dev server with live reload:

npm run serve:ssr:dev
# or
npx ng run angular-universal-nebular-theme:serve-ssr

Running Tests

npm test

Project Structure

├── src/
│   ├── app/
│   │   ├── dashboard/          # Dashboard component (Tour of Heroes)
│   │   ├── hero-detail/        # Hero detail component
│   │   ├── hero-search/        # Hero search component
│   │   ├── heroes/             # Heroes list component
│   │   ├── messages/           # Messages component
│   │   ├── sample/             # Lazy-loaded Nebular layout sample
│   │   ├── app.module.ts       # Root NgModule
│   │   ├── app.server.module.ts # SSR NgModule
│   │   ├── app-routing.module.ts # App routing
│   │   └── app.component.ts    # Root component
│   ├── main.ts                 # Browser entry point
│   ├── main.server.ts          # Server entry point
│   └── index.html              # App shell
├── server.ts                   # Express SSR server (CommonEngine)
├── angular.json                # Angular CLI workspace config
├── tsconfig.json               # Base TypeScript config
├── tsconfig.app.json           # App TypeScript config
└── tsconfig.spec.json          # Test TypeScript config

Nebular Sample Page

Visit /sample to see the Nebular layout with sidebar in action. This route is lazy-loaded, demonstrating code-splitting with Nebular components.

How SSR Works

This project uses Angular's built-in SSR support (@angular/ssr) with Express:

1. The Angular CLI builds both browser and server bundles using the application builder.
2. server.ts starts an Express server that uses CommonEngine to render each request server-side.
3. Static files (JS, CSS, images) are served directly from the browser/ output folder.
4. All other routes are handled by the Angular Universal engine, which returns fully-rendered HTML.

This improves:

• SEO — Search engines receive fully rendered HTML
• First Contentful Paint (FCP) — Users see content before JavaScript loads
• Performance — Reduced time-to-interactive

Key Dependencies

Package	Version	Purpose
@angular/core	^21.2	Angular framework
@nebular/theme	^17.0	Nebular UI components
@angular/ssr	^21.2	Server-side rendering
express	^5.0	HTTP server
rxjs	^7.8	Reactive extensions
zone.js	~0.16	Angular change detection

Scripts Reference

Command	Description
npm start	Start development server on port 4200
npm run build	Build the application
npm run build:ssr	Build browser + server bundles for production
npm run serve:ssr	Serve production SSR build on port 4000
npm run serve:ssr:dev	Start SSR dev server with live reload
npm test	Run unit tests with Karma
npm run watch	Build and watch for changes

License

MIT