Explain server.ts and main.ts in Angular Universal

WHAT THIS TESTS: Your understanding of Angular SSR's split entry-point design and the critical handoff between server-rendered static HTML and the client-side single-page application. Interviewers want to know you can distinguish the server runtime from the browser runtime and explain the performance implications of each phase.

A GOOD ANSWER COVERS: First, the file roles. server.ts is the Node.js or Express server entry point in an Angular Universal application. It receives incoming HTTP requests, uses Angular's server-side rendering engine to render the application to HTML for the requested route, and serves that HTML along with serialized TransferState. main.ts is the browser entry point. It bootstraps the Angular application in the browser, typically using bootstrapApplication or platformBrowser, and initiates hydration where Angular reuses the server-rendered DOM and attaches event listeners and data bindings rather than rebuilding the DOM from scratch.

Second, the request flow difference. On an initial server request, the browser sends an HTTP request to the server.ts runtime. The server runs Angular, generates the full HTML page including any data fetched via resolvers or HTTP calls, and returns it. The browser paints this HTML immediately for fast First Contentful Paint. Then the browser downloads the JavaScript bundles, executes main.ts, and hydrates the application. Once hydration completes, the application becomes fully interactive. On a subsequent client-side navigation, the Angular Router intercepts the navigation event. Because the application is already bootstrapped and hydrated, the router loads any required lazy chunks, fetches data if needed, and updates the DOM directly in the browser. It does not make a new HTTP request to the server for HTML, and server.ts is not involved.

COMMON WRONG ANSWERS: A major red flag is claiming that server.ts handles every route change or that the server re-renders the application on each navigation. Another is confusing server.ts with a simple static file server like nginx; it is an active Node.js process that runs Angular. Candidates also err by saying main.ts replaces the entire server-rendered DOM on bootstrap; in modern Angular, hydration reuses the existing DOM to avoid layout shift and preserve state.

LIKELY FOLLOW-UPS: The interviewer may ask how TransferState avoids duplicate HTTP requests during hydration. They might ask about the differences between hydration in older Angular Universal versus modern Angular SSR, or how to debug hydration mismatches. Another common follow-up is how to handle browser-only APIs in server.ts since it runs in a Node.js environment without window or document.

ONE CONCRETE EXAMPLE: Imagine an e-commerce product page. A user clicks a link from Google. The request hits server.ts, which renders the product details, price, and reviews into HTML and embeds the product API response in TransferState. The browser shows the page in 200 milliseconds. main.ts then boots, reads the product data from TransferState instead of refetching, and hydrates the Add to Cart button. When the user clicks a related product, the Angular Router handles the transition client-side, fetching only a small JSON payload for the next product while keeping the header and footer intact.