INITIAL_CONFIG is the dependency-injection token Angular uses for the initial configuration of the server platform. It is exported from @angular/platform-server, is declared as InjectionToken<PlatformConfig>, and Angular’s API reference describes it as “The DI token for setting the initial config for the platform.” Its value controls two things: the starting document and the starting URL of a server-rendered application.
What the token holds: PlatformConfig
The value you provide for INITIAL_CONFIG is a PlatformConfig object. Both of its properties are optional.
As an Amazon Associate I earn from qualifying purchases.
| Property | Purpose | If omitted |
|---|---|---|
document |
The initial DOM used to bootstrap the server application. | Angular creates a new DOM using Domino. |
url |
The URL for the current application state, used to initialize the platform location (protocol, hostname and port included). | Not stated in the API reference; do not assume a default, and supply it when your routing or location logic depends on it. |
In the current platform-server source, the token is read while the server document is being constructed. When a document string is configured, the platform parses it and can resolve it against the configured URL. That is why the two fields are usually set together.
Setting the initial document and URL
Because the token is just a provider key, you supply it in the providers of the server platform. A typical low-level form looks like this:
#1 Best Overall
import { platformServer, INITIAL_CONFIG } from '@angular/platform-server';
const platformRef = platformServer([
{
provide: INITIAL_CONFIG,
useValue: {
document: '<html><body><app-root></app-root></body></html>',
url: 'https://example.com/products/42'
}
}
]);Treat this as an illustration of the shape of the config, not a drop-in setup. Check the signatures against the Angular version you run, since server bootstrapping APIs have changed across releases.
- Use
documentwhen you need to control the HTML the app is bootstrapped into, such as a prepared index template. - Use
urlwhen the server needs to know which route and origin it is rendering, so the platform location and anything built on it start in the right place. - Provide neither and Angular falls back to a Domino-created DOM.
Do you need to touch it in a modern SSR app?
Usually not directly. Angular’s current server-side rendering guidance frames SSR, prerendering and client rendering as hybrid-rendering choices and configures SSR through higher-level APIs such as provideServerRendering. INITIAL_CONFIG sits underneath that as a lower-level platform token. Reach for it when you are writing custom server bootstrapping, building test harnesses that render with a fixed document and URL, or debugging why the server saw a different document or location than you expected.
Older Angular Universal tutorials often show manual platform setup. Don’t assume those examples are current. Identify your Angular version and follow the setup documented for it.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Rank #3
Debugging checklist
- Wrong route rendered on the server: check that
urlreflects the incoming request, including path, and not a fixed value. - Unexpected blank or default markup: if no
documentwas supplied, Angular used a fresh Domino DOM, so your template never reached the server. - Relative URL problems: because the document can be resolved against the configured URL, an incomplete or missing origin can change how links resolve.
- Token not picked up: confirm the provider is registered on the server platform, not only in the browser application config.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
