Skip to content

Angular @defer breaks when a deferred component is used as a GENERIC TYPE (not a value) of the viewChild #55991

@tomastrajan

Description

@tomastrajan

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

When using viewChild to query for a component wrapped with @defer and using the deferred component class as a generic type of the viewChild, eg child = viewChild<ChildComponent>('someTplVariable') the @defer behavior breaks and the deferred component bundle is not extracted as a lazy loaded bundle.

Steps to reproduce (also available inline in the Stackblitz)

  1. open the provided Stackblitz

  2. open demo in separate tab (so it's easy to see network tab traffic without Stackblitz specific things)

  3. after 3 seconds, no additional bundle will be loaded after 3 seconds (network tab)

  4. remove the generic type from view child

  5. save and refresh the opened tab

  6. the child bundle will be loaded after 3 seconds (network tab)

Expected behavior

Using the deferred component class only as a generic type will work with @defer

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/view-child-generic-arg-breaks-defer

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.3.7
Node: 18.18.0
Package Manager: npm 10.2.3
OS: linux x64

Angular: 17.3.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.7
@angular-devkit/build-angular   17.3.7
@angular-devkit/core            17.3.7
@angular-devkit/schematics      17.3.7
@angular/cli                    17.3.7
@schematics/angular             17.3.7
rxjs                            7.8.1
typescript                      5.3.3


Anything else?

No response

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: compilerIssues related to `ngc`, Angular's template compilerarea: coreIssues related to the framework runtimebugcore: deferIssues related to @defer blocks.state: has PRworkaround2: non-obvious

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions