Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular’s NG8021 warning means an @defer block has a prefetch and main-load trigger that is unreachable, redundant, or ordered so the prefetch cannot help. Fix it by removing useless prefetching, making a prefetch timer earlier than the main timer, or giving conditional prefetch an explicit main trigger. Extended diagnostics, including NG8021, require strictTemplates.
What NG8021 means
NG8021 identifies unreachable or redundant triggers in @defer blocks. It is not a general error about lazy loading. Angular reports it when the block’s prefetch configuration cannot provide the intended early fetch or duplicates the main trigger. See Angular’s NG8021 diagnostic reference.
Prefetching fetches deferred code; it does not control when the deferred content renders. Rendering is controlled by the block’s main on or when condition. Keeping those roles separate is essential when deciding how to correct a warning. The @defer API documents this distinction.
Which trigger patterns cause the warning
on immediate with prefetch
An immediate main trigger loads the deferred content right away, leaving no useful earlier opportunity for a prefetch trigger. Remove the prefetch condition.
#1 Best Overall
Prefetch timer equal to or later than the main timer
A prefetch timer must run before the main timer to get code ready in advance. If both timers are equal, or prefetch is later, it cannot provide that head start. Angular’s example uses prefetch at 500 ms and the main trigger at 1000 ms.
Prefetch without an explicit main trigger
When you specify prefetch but no main trigger, the main trigger defaults to on idle. That means idle can start fetching the deferred code; the prefetch condition does not act as a gate for the main load. Add an explicit main trigger if loading should wait for a separate event or condition.
Rank #2
- Keep track of everything from attendance to test scores
- Spiral bound
- Measures 8-1/2" x 11"
Identical prefetch and main triggers
If prefetch and main loading use the same trigger, the prefetch is redundant: it does not get the code ready earlier. Remove it, or choose distinct triggers that reflect the intended sequence.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →How to correct the configuration
Choose the fix according to the behavior you want, rather than simply suppressing the diagnostic.
Rank #3
- Immediate load: Keep
on immediateand remove prefetch. - Timer-based head start: Set the prefetch timer to a shorter delay than the main timer. For example, prefetch at 500 ms and load at 1000 ms.
- Conditional prefetch with delayed loading: Specify both triggers. For example, use
prefetch when someFlag()and a main trigger such ason interaction. The condition can then start fetching without making it the rendering trigger. - Different user actions: Use genuinely distinct triggers when early fetching is intended—for example, prefetch on hover over an area and load on interaction with a button.
- No useful early fetch: Remove the prefetch clause rather than keeping a duplicate or ineffective trigger.
Multiple triggers are separated with semicolons. Angular’s API reference describes the available syntax and the separation between prefetching and rendering.
Check the diagnostic is enabled
NG8021 is an extended diagnostic. Set strictTemplates to true in the relevant Angular compiler configuration for extended diagnostics to emit; NG8021 has no additional requirement beyond that. If the warning is absent, this setting is one thing to verify.
Rank #4
When observed loading does not match the triggers
Hot Module Replacement can fetch chunks eagerly
With active Hot Module Replacement (HMR), Angular documents that all @defer chunks are fetched eagerly, overriding configured triggers. To check normal trigger behavior, serve with --no-hmr.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Default SSR and SSG do not run defer triggers on the server
With server-side rendering or static site generation, Angular renders the placeholder—or nothing if there is no placeholder—without invoking defer triggers on the server. Triggers activate on the client after the placeholder hydrates. Angular documents Incremental Hydration with hydrate triggers as the route to rendering the main content on the server. See the deferred loading guide.
Chunk splitting issues are separate from NG8021
If the trigger configuration is sound but dependencies do not end up in a separate lazy chunk, check how those dependencies are imported. Angular says deferred dependencies must be standalone and not referenced outside @defer in the same file. Barrel-file imports can also prevent a separate lazy chunk; Angular recommends direct imports. These are adjacent chunk-splitting concerns, not the trigger misconfigurations NG8021 diagnoses.
Choose triggers based on the intended behavior
Angular provides built-in triggers for idle, viewport, interaction, hover, immediate, and timer; when accepts a custom condition. The default is idle. Multiple event triggers are OR conditions, so any one of them can activate the block. A when condition does not reverse the block after its one-time swap to deferred content. These details are covered in Angular’s defer triggers tutorial.
- Decide what user action or condition should start fetching code.
- Decide separately what event or condition should activate the deferred content.
- Confirm that any prefetch trigger happens earlier than the main trigger and is meaningfully distinct from it.
- Check whether HMR or server rendering explains behavior that differs from the configured client-side triggers.
Angular describes deferrable views as a way to reduce initial bundle size and warns that misconfiguration can miss optimization opportunities; it does not attach a measured percentage or performance guarantee to NG8021. The appropriate fix is therefore the one that preserves the intended loading behavior, not a presumed performance target.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteQuick Recap
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.
