Angular 20 Interview Questions and Answers (2025) – Part 5: PWA, SSR, Zone.js & Optimization

In Part 4, we covered Standalone Components, Angular Elements & Micro Frontends (Q151–Q170).

Now in Part 5 of Angular 20 Interview Questions and Answers (2025 Edition), we’ll explore:

• Progressive Web Apps (PWA) in Angular (Q171–Q180)
• Server-Side Rendering (SSR) & Angular Universal (Q181–Q190)
• Zone.js, ngOptimizedImage & Advanced Performance Optimization (Q191–Q200)

PWA in Angular (Q171–Q180)

Q171. What is a Progressive Web App (PWA)?

• A PWA is a web application with offline support, push notifications, and installability like native apps.

Q172. How do you make an Angular app a PWA?

ng add @angular/pwa

This adds service workers, manifest, and icons.

Q173. What is a Service Worker in Angular?

• A script that runs in the background.
• Caches assets & API calls for offline use.

Q174. How do you configure caching in Angular PWA?

{
  "assetGroups": [
    { "name": "app", "installMode": "prefetch", "resources": { "files": ["/*.html", "/*.css", "/*.js"] } }
  ]
}

Q175. How do PWAs handle offline data sync in Angular?

• Use IndexedDB (via idb or NgRx Data).
• Sync data when online using background sync APIs.

Q176. How do you test an Angular PWA?

• Chrome DevTools → Lighthouse Audit.
• Test offline mode via DevTools → Network → “Offline”.

Q177. What are the advantages of Angular PWAs?

• Faster loading (caching).
• Works offline.
• Push notifications.
• Add-to-home-screen installable.

Q178. How do you enable push notifications in Angular PWA?

• Use @angular/service-worker + Firebase Cloud Messaging.

Q179. What are the limitations of PWAs?

• Limited access to device hardware compared to native apps.
• App Store distribution is still restricted.

Q180. How do you update a service worker in Angular?

• Deploy new version → Angular detects & prompts users to reload.

Server-Side Rendering (Q181–Q190)

Q181. What is Angular Universal (SSR)?

• A technique where Angular renders HTML on the server instead of client.
• Improves SEO & first load performance.

Q182. How do you enable SSR in Angular 20?

ng add @nguniversal/express-engine

Q183. What are the benefits of Angular SSR?

• Better SEO for crawlers.
• Faster First Contentful Paint (FCP).
• Works on slow networks.

Q184. What are the drawbacks of SSR in Angular?

• More complex setup.
• Requires Node.js server.
• Increased server load.

Q185. How do you deploy Angular Universal apps?

• Platforms: Vercel, Firebase Functions, AWS Lambda, or custom Node servers.

Q186. What is pre-rendering in Angular SSR?

• Generates static HTML pages at build time.
• Hybrid of static site generation & SSR.

Q187. How do you use TransferState in Angular SSR?

• Caches API responses on server.
• Hydrates them on client without duplicate HTTP calls.

Q188. What is the difference between SSR and SSG in Angular?

• SSR → render HTML at runtime on server.
• SSG → pre-generate HTML at build time.

Q189. How do you handle authentication with Angular SSR?

• Store session tokens securely.
• Use server APIs with cookies instead of local storage.

Q190. How to debug SSR issues in Angular?

• Use server logs.
• Run npm run dev:ssr to see rendering issues.

Zone.js & Optimization (Q191–Q200)

Q191. What is Zone.js in Angular?

• A library that patches async APIs.
• Tracks async operations & triggers change detection automatically.

Q192. Why is Zone.js important in Angular?

• Makes Angular auto-update UI after async tasks.
• Without it, you’d need manual change detection calls.

Q193. How do you run code outside Angular’s Zone for performance?

this.zone.runOutsideAngular(() => {
  window.addEventListener('scroll', () => { /* no CD triggered */ });
});

Q194. How do you re-enter Angular Zone manually?

this.zone.run(() => { this.value = 42; });

Q195. What is ngOptimizedImage in Angular 20?

• Built-in directive for image optimization.
• Features: lazy loading, srcset generation, automatic resizing.

Q196. Example usage of ngOptimizedImage?

 ngSrc="assets/banner.png" width="800" height="400" priority />

Q197. What are Angular Performance Best Practices?

• Use OnPush strategy.
• Use trackBy in *ngFor.
• Preload & lazy load modules.
• Use async pipe.
• Avoid memory leaks with takeUntil.
• Optimize images with ngOptimizedImage.

Q198. How do you profile Angular performance?

• Angular DevTools Profiler.
• Chrome DevTools → Performance tab.

Q199. How to reduce bundle size in Angular apps?

• Enable optimization in angular.json.
• Use Standalone Components.
• Remove unused imports.
• Use ng build --configuration production.

Q200. What is hydration in Angular SSR?

• Process of reusing server-rendered DOM instead of re-rendering on client.
• Improves startup performance.

Conclusion

This was Part 5 of Angular 20 Interview Questions and Answers (2025 Edition).

We covered:
PWA in Angular (Q171–Q180)
SSR & Angular Universal (Q181–Q190)
Zone.js & Optimization (Q191–Q200)