How does Angular deliver a route with redirectTo when the app is prerendered for static hosting, compared with when Angular's server engine serves it?
answer
- no server, no Location header
- a tiny HTML page instead
- meta refresh with zero delay
- server engine sends real redirect
basics
~20 sWith static output, the build writes an HTML page for the old path containing a zero-delay meta refresh and a link: a soft redirect served with status 200. Behind Angular's server engine, the same route gets a real HTTP redirect, 302 by default.
solid answer
~40 sA client route like `{ path: 'guide', redirectTo: 'docs/getting-started' }` cannot become an HTTP redirect when there is no server to send a `Location` header. So when the build uses the static output mode, Angular writes `guide/index.html` as a small page with `<meta http-equiv="refresh" content="0; url=/docs/getting-started">` and a visible link. The browser follows it immediately, but the response status is `200`, and crawlers and link checkers may not treat it like a `301`. When the app is served by Angular's server engine, redirects are not prerendered; the engine answers with a real redirect response and a `Location` header, `302` unless the server route sets another redirect status. For permanent moves on a static host, prefer the host's own redirect rules where it offers them.
go deeper
Know that a static Angular build turns redirect routes into small HTML pages that forward the browser.
Explain the meta refresh page, its 200 status, and that Angular's server engine instead sends a real redirect.
Plan URL changes with the SEO cost of soft redirects in mind and move permanent redirects into host or server configuration.
Set a redirect policy for URL restructures that accounts for the hosting model, crawler behaviour and cache invalidation.
## Two deployment shapes, two answers A route such as `{ path: 'guide', redirectTo: 'docs/getting-started' }` moves visitors from an old path to a new one. How Angular delivers that depends on whether a server exists when the request arrives. | Deployment | How `guide` is answered | Status | |---|---|---| | Angular's server engine (server output mode) | An HTTP redirect with a `Location` header | `302` by default, or the redirect status set on the server route | | Static files only (static output mode) | A generated HTML page with a meta refresh | `200` | ## The static case: a soft redirect With no server, nothing can send a `Location` header, so the build writes a file for the old path instead. For the route above it produces `guide/index.html` containing, in essence: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Redirecting</title> <meta http-equiv="refresh" content="0; url=/docs/getting-started"> </head> <body> <pre>Redirecting to <a href="/docs/getting-started">/docs/getting-started</a></pre> </body> </html> ``` This is called a **soft redirect**: - The browser loads the page and immediately navigates to the target because of the zero-second refresh. - The link covers clients that ignore meta refresh. - The response for `guide` is a normal `200` page, not a `3xx`. ## The server case: a real redirect When Angular's server engine handles requests, redirect routes are **not** written as files. The engine matches the path at request time and answers with a redirect response and a `Location` header. The default status is `302`. If the matching server route is a `RenderMode.Server` route with a `status` such as `301`, that status is used instead, and development builds reject codes other than `301`, `302`, `303`, `307` and `308`. ## Why the difference matters 1. **Search engines.** A `301` clearly says "moved permanently". An instant meta refresh is a weaker, less standard signal that crawlers may treat differently. 2. **Tools.** Link checkers, monitoring and API clients often follow `3xx` responses but not meta refresh. 3. **Speed.** A soft redirect costs an extra document load before the target starts loading. 4. **Caching.** The soft-redirect page is cached like any static file, so changing the target needs a rebuild and cache invalidation. ## What the build does, step by step 1. The build extracts routes and notes each one that has `redirectTo`, resolving relative targets against the route's path. 2. If the output mode is **server**, redirect routes are left out of prerendering; the server engine keeps them in its route manifest and answers them at request time. 3. If the output mode is **static**, each redirect route gets a generated page at `<old-path>/index.html` with the meta refresh tag and a fallback link. 4. A route configured for server rendering fails a static build with an error, because nothing could serve it; redirects are the one server-style behaviour a static build approximates on its own. ## Practical guidance - On a static host that supports redirect rules, configure permanent moves there, and keep Angular's generated pages as a safety net. - Behind Angular's server engine, use a server-rendered route with a redirect `status` when the move is permanent. - Avoid long redirect chains, because each step in the static case is a full page load. - After a URL restructure, test the old paths in the deployed environment, not only in the dev server, because the dev server does not reproduce the static host's behaviour. ## Why interviewers ask it Few candidates know that the same `redirectTo` produces different HTTP behaviour depending on the build's output mode. It is a small detail with real SEO consequences when a documentation site renames its pages.
- Why can't the static build just emit a 301 for the redirect route?A status code and `Location` header are properties of a server response. A static build only produces files, and the host decides how to serve them. The only redirect a file can carry by itself is in its content, so Angular writes a meta refresh page and leaves real redirects to host configuration.
- Which redirect status does Angular's server engine use by default?`302`, a temporary redirect. The engine builds the response from the matched server route, and development builds throw if the route's status is not one of 301, 302, 303, 307 or 308.
saying these in an interview costs you the question
- A prerendered redirect is always an HTTP 301.
- Meta refresh redirects return a 3xx status code.
- Angular's server engine also serves the meta refresh file.
- Redirect routes are dropped entirely from static builds.
- The dev server shows exactly how redirects behave on a static host.