diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/GOLDEN_PARTIAL.js
index e4bcf5223e2..69fbedda22f 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/GOLDEN_PARTIAL.js
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/GOLDEN_PARTIAL.js
@@ -13,6 +13,7 @@ MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-
{{message}}
{#defer}Deferred content{/defer}
+
Content after defer block
{{message}}
{#defer}Deferred content{/defer}
+
Content after defer block
{{message}}
{#defer}Deferred content{/defer}
+
Content after defer block
Text outside of a defer block
+ {#defer when isVisible}
+
+ {/defer}
+ `
+ })
+ class MyCmp {
+ isVisible = false;
+ }
+
+ const fixture = TestBed.createComponent(MyCmp);
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.outerHTML).toContain('Text outside of a defer block');
+
+ fixture.componentInstance.isVisible = true;
+ fixture.detectChanges();
+
+ // Wait for dependencies to load.
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.outerHTML).toContain('Hi!');
+ });
+
+
+ describe('directive matching', () => {
+ it('should support directive matching in all blocks', async () => {
+ @Component({
+ selector: 'nested-cmp',
+ standalone: true,
+ template: 'Rendering {{ block }} block.',
+ })
+ class NestedCmp {
+ @Input() block!: string;
+ }
+
+ @Component({
+ standalone: true,
+ selector: 'simple-app',
+ imports: [NestedCmp],
+ template: `
+ {#defer when isVisible}
+
+ {:loading}
+ Loading...
+
+ {:placeholder}
+ Placeholder!
+
+ {:error}
+ Failed to load dependencies :(
+
+ {/defer}
+ `
+ })
+ class MyCmp {
+ isVisible = false;
+ }
+
+ const fixture = TestBed.createComponent(MyCmp);
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.outerHTML)
+ .toContain(
+ 'Rendering placeholder block.');
+
+ fixture.componentInstance.isVisible = true;
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.outerHTML)
+ .toContain(
+ 'Rendering loading block.');
+
+ // Wait for dependencies to load.
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.outerHTML)
+ .toContain(
+ 'Rendering primary block.');
+ });
+ });
+
+ describe('error handling', () => {
+ it('should render an error block when loading fails', async () => {
+ @Component({
+ selector: 'nested-cmp',
+ standalone: true,
+ template: 'Rendering {{ block }} block.',
+ })
+ class NestedCmp {
+ @Input() block!: string;
+ }
+
+ @Component({
+ standalone: true,
+ selector: 'simple-app',
+ imports: [NestedCmp],
+ template: `
+ {#defer when isVisible}
+
+ {:loading}
+ Loading...
+ {:placeholder}
+ Placeholder!
+ {:error}
+ Failed to load dependencies :(
+
+ {/defer}
+ `
+ })
+ class MyCmp {
+ isVisible = false;
+ @ViewChildren(NestedCmp) cmps!: QueryList;
+ }
+
+ const deferDepsInterceptor = {
+ intercept() {
+ // Simulate loading failure.
+ return () => [Promise.reject()];
+ }
+ };
+
+ TestBed.configureTestingModule({
+ providers: [
+ {provide: ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR, useValue: deferDepsInterceptor},
+ ]
+ });
+
+ const fixture = TestBed.createComponent(MyCmp);
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.outerHTML).toContain('Placeholder');
+
+ fixture.componentInstance.isVisible = true;
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.outerHTML).toContain('Loading');
+
+ // Wait for dependencies to load.
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ // Verify that the error block is rendered.
+ // Also verify that selector matching works in an error block.
+ expect(fixture.nativeElement.outerHTML)
+ .toContain('Rendering error block.');
+
+ // Verify that queries work within an error block.
+ expect(fixture.componentInstance.cmps.length).toBe(1);
+ expect(fixture.componentInstance.cmps.get(0)?.block).toBe('error');
+ });
+ });
+
+ describe('queries', () => {
+ it('should query for components within each block', async () => {
+ @Component({
+ selector: 'nested-cmp',
+ standalone: true,
+ template: 'Rendering {{ block }} block.',
+ })
+ class NestedCmp {
+ @Input() block!: string;
+ }
+
+ @Component({
+ standalone: true,
+ selector: 'simple-app',
+ imports: [NestedCmp],
+ template: `
+ {#defer when isVisible}
+
+ {:loading}
+ Loading...
+
+ {:placeholder}
+ Placeholder!
+
+ {:error}
+ Failed to load dependencies :(
+
+ {/defer}
+ `
+ })
+ class MyCmp {
+ isVisible = false;
+
+ @ViewChildren(NestedCmp) cmps!: QueryList;
+ }
+
+ const fixture = TestBed.createComponent(MyCmp);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.cmps.length).toBe(1);
+ expect(fixture.componentInstance.cmps.get(0)?.block).toBe('placeholder');
+ expect(fixture.nativeElement.outerHTML)
+ .toContain(
+ 'Rendering placeholder block.');
+
+ fixture.componentInstance.isVisible = true;
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.cmps.length).toBe(1);
+ expect(fixture.componentInstance.cmps.get(0)?.block).toBe('loading');
+ expect(fixture.nativeElement.outerHTML)
+ .toContain(
+ 'Rendering loading block.');
+
+ // Wait for dependencies to load.
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.cmps.length).toBe(1);
+ expect(fixture.componentInstance.cmps.get(0)?.block).toBe('primary');
+ expect(fixture.nativeElement.outerHTML)
+ .toContain(
+ 'Rendering primary block.');
+ });
+ });
+
+ describe('content projection', () => {
+ it('should be able to project content into each block', async () => {
+ @Component({
+ selector: 'cmp-a',
+ standalone: true,
+ template: 'CmpA',
+ })
+ class CmpA {
+ }
+
+ @Component({
+ selector: 'cmp-b',
+ standalone: true,
+ template: 'CmpB',
+ })
+ class CmpB {
+ }
+
+ @Component({
+ selector: 'nested-cmp',
+ standalone: true,
+ template: 'Rendering {{ block }} block.',
+ })
+ class NestedCmp {
+ @Input() block!: string;
+ }
+
+ @Component({
+ standalone: true,
+ selector: 'my-app',
+ imports: [NestedCmp],
+ template: `
+ {#defer when isVisible}
+
+
+ {:loading}
+ Loading...
+
+ {:placeholder}
+ Placeholder!
+
+ {:error}
+ Failed to load dependencies :(
+
+ {/defer}
+ `
+ })
+ class MyCmp {
+ @Input() isVisible = false;
+ }
+
+ @Component({
+ standalone: true,
+ selector: 'root-app',
+ imports: [MyCmp, CmpA, CmpB],
+ template: `
+
+ Projected content.
+ Including tags
+
+ {#defer when isInViewport}
+
+ {:placeholder}
+ Projected defer block placeholder.
+ {/defer}
+
+ `
+ })
+ class RootCmp {
+ isVisible = false;
+ isInViewport = false;
+ }
+
+ const fixture = TestBed.createComponent(RootCmp);
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.outerHTML)
+ .toContain(
+ 'Rendering placeholder block.');
+
+ fixture.componentInstance.isVisible = true;
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.outerHTML)
+ .toContain(
+ 'Rendering loading block.');
+
+ // Wait for dependencies to load.
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ // Verify primary block content.
+ const primaryBlockHTML = fixture.nativeElement.outerHTML;
+ expect(primaryBlockHTML)
+ .toContain(
+ 'Rendering primary block.');
+ expect(primaryBlockHTML).toContain('Projected content.');
+ expect(primaryBlockHTML).toContain('Including tags');
+ expect(primaryBlockHTML).toContain('CmpA');
+ expect(primaryBlockHTML).toContain('Projected defer block placeholder.');
+
+ fixture.componentInstance.isInViewport = true;
+ fixture.detectChanges();
+
+ // Wait for projected block dependencies to load.
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ // Nested defer block was triggered and the `CmpB` content got rendered.
+ expect(fixture.nativeElement.outerHTML).toContain('CmpB');
+ });
+ });
+
+ describe('nested blocks', () => {
+ it('should be able to have nested blocks', async () => {
+ @Component({
+ selector: 'cmp-a',
+ standalone: true,
+ template: 'CmpA',
+ })
+ class CmpA {
+ }
+
+ @Component({
+ selector: 'nested-cmp',
+ standalone: true,
+ template: 'Rendering {{ block }} block.',
+ })
+ class NestedCmp {
+ @Input() block!: string;
+ }
+
+ @Component({
+ standalone: true,
+ selector: 'root-app',
+ imports: [NestedCmp, CmpA],
+ template: `
+ {#defer when isVisible}
+
+ {#defer when isInViewport}
+
+ {:placeholder}
+ Nested defer block placeholder.
+ {/defer}
+ {:placeholder}
+
+ {/defer}
+ `
+ })
+ class RootCmp {
+ isVisible = false;
+ isInViewport = false;
+ }
+
+ const fixture = TestBed.createComponent(RootCmp);
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.outerHTML)
+ .toContain(
+ 'Rendering placeholder block.');
+
+ fixture.componentInstance.isVisible = true;
+ fixture.detectChanges();
+
+ await fixture.whenStable(); // loading dependencies for the defer block within MyCmp...
+ fixture.detectChanges();
+
+ // Verify primary block content.
+ const primaryBlockHTML = fixture.nativeElement.outerHTML;
+ expect(primaryBlockHTML)
+ .toContain(
+ 'Rendering primary block.');
+
+ // Make sure we have a nested block in a placeholder state.
+ expect(primaryBlockHTML).toContain('Nested defer block placeholder.');
+
+ // Trigger condition for the nested block.
+ fixture.componentInstance.isInViewport = true;
+ fixture.detectChanges();
+
+ // Wait for nested block dependencies to load.
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ // Nested defer block was triggered and the `CmpB` content got rendered.
+ expect(fixture.nativeElement.outerHTML).toContain('CmpA');
+ });
+ });
+});
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
index c1a7bd5b965..5cc1130e5be 100644
--- a/packages/core/test/bundling/router/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -1977,7 +1977,7 @@
"name": "tap"
},
{
- "name": "throwError5"
+ "name": "throwError6"
},
{
"name": "throwIfEmpty"