Suggest an edit

Improve this article

Refine the answer for “What does the ng add @angular/ssr command do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The command:

```javascript
ng add @angular/ssr
```

automatically **enables SSR (Server-Side Rendering) in an existing Angular project** and configures Angular Universal.

---

### **What exactly this command does:**

1. **Installs the required packages**
  - `@angular/ssr`
  - `@angular/platform-server`
  - and related dependencies
2. **Adds a server build**
  - creates the files for rendering on the server (Node.js)
  - adds `main.server.ts`
3. **Updates the Angular configuration**
  - extends `angular.json` with SSR tasks (a `server` and `ssr` build)
4. **Changes AppModule**
  - adds Universal support
  - registers the required providers
5. **Adds commands to npm-scripts**, for example:

```javascript
  npm run build:ssr
  npm run serve:ssr
  ```
so you can build and run the SSR version of the application

---

### **What this gives you:**

After `ng add @angular/ssr` your Angular project can:

- render pages **on the server**
- serve finished HTML **before JS loads**
- improve **SEO, first-paint speed, and previews on social media**

---

### **Conclusion:**

The `ng add @angular/ssr` command is a quick way to **automatically enable SSR and Angular Universal** in a project without manual setup.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts176 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.