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

[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)

0. open the provided Stackblitz

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

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

3. remove the generic type from view child

4. save and refresh the opened tab

5. 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

[JeanMeche]

Note that the issue also exist with the decorator query.
@ViewChild('test') child: Child breakes defer while @ViewChild('test') child: any doesn't present any issue.

[tomastrajan]

The use-case is to be able to call the child components methods without a need to create additional interfaces to work around this issue. We use it a lot in this way in the custom component library.

[JoostK]

I don't think the import removal analysis is capable of differentiating between type-position only imports.

You can get this to work using

import type { Child as ChildType } from './child.component';

so there isn't any need for an interface.

[JoostK]

Or with a single import statement:

import { Child, type Child as ChildType } from './child.component';

also works.

[tomastrajan]

Maybe this could be referenced in the docs as well ?