The feature ticks right after NavigationEnd, before the task ends. The page is bound before the first paint. Angular schedules the tick as a macrotask on purpose, see angular/angular#57528.
withRenderOnNavigation
A provideWr() feature for zoneless apps: a routed page is bound in the task that inserted it, so nothing fades in from browser defaults.
What it fixes
Zoneless, the router inserts a routed page in one task and Angular runs its first change detection in a later one. A browser that styles the page in between paints it without its bound classes. Fields fade from grey borders and white backgrounds into the theme on every page switch.
Usage
Pass it to provideWr() at bootstrap. Lives in ngwr/utils/router, since @angular/router is an optional peer.
import { provideWr } from 'ngwr';
import { withRenderOnNavigation } from 'ngwr/utils/router';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideWr(withRenderOnNavigation())],
};When you do not need it
| Case | Why |
|---|---|
| Your app uses zones | Change detection already runs in the same task. |
| Routed pages have no transitioning bindings | Nothing fades, so nothing shows. |
| Only ngwr components flicker | They carry static host classes since v16.1. The feature covers your own bindings. |
API
| Name | Description | Type | Default |
|---|---|---|---|
withRenderOnNavigation() | A provideWr() feature. Runs a change detection tick in a microtask right after NavigationEnd, before the browser paints the routed page. The tick Angular had scheduled is cancelled by it, so nothing runs twice. | () => WrFeature<"render-on-navigation"> | - |