Using @defer with an inner mat-select causes No provider for InjectionToken mat-select-scroll-strategy! error

[NachmanBerkowitz]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16

Description

Using @defer where the inner component has a mat select causes No provider for InjectionToken mat-select-scroll-strategy! Error. This happens when the component that has the defer block does not import MatSelectModule in its imports array. This happen even if the nested component that has the mat-select does import the MatSelectModule .

Reproduction

StackBlitz link: https://stackblitz.com/edit/npjg8f?file=src%2Fexample%2Fselect-overview-example.html
Steps to reproduce:

1. Use @defer(with condition) where a nested component has a mat-select.
   Like @defer(with condition){<app-a> <app-b/> </app-a>} and <app-b> has a mat-select inside of it.
2. The component that has the @defer does not import MatSelectModule in its imports array, <app-b> does.
3. When the defer conditon is fuffilled, the error will occur.

Expected Behavior

No error and everything should work.

Actual Behavior

vendor.js:43656  ERROR NullInjectorError: R3InjectorError(Environment Injector)[InjectionToken mat-select-scroll-strategy -> InjectionToken mat-select-scroll-strategy]: 
  NullInjectorError: No provider for InjectionToken mat-select-scroll-strategy!
    at NullInjector.get (vendor.js:37713:21)
    at R3Injector.get (vendor.js:38164:27)
    at R3Injector.get (vendor.js:38164:27)
    at ChainedInjector.get (vendor.js:47251:32)
    at lookupTokenUsingModuleInjector (vendor.js:36272:31)
    at getOrCreateInjectable (vendor.js:36318:10)
    at Module.ɵɵdirectiveInject (vendor.js:43878:17)
    at NodeInjectorFactory.MatSelect_Factory [as factory] (src_example_my_ts.js:19241:1454)
    at getNodeInjectable (vendor.js:36512:38)
    at instantiateAllDirectives (vendor.js:44650:23)

Environment

• Angular: 17
• CDK/Material: 17
• Browser(s): Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[crisbeto]

This is already resolved in f520024 for 17.1.0, but it might make sense to backport some of it to the patch branch.

[jczacharia]

I had a similar issue:

ERROR NullInjectorError: R3InjectorError(Standalone[_ToolbarComponent])[InjectionToken mat-tooltip-scroll-strategy -> InjectionToken mat-tooltip-scroll-strategy -> InjectionToken mat-tooltip-scroll-strategy]: 
  NullInjectorError: No provider for InjectionToken mat-tooltip-scroll-strategy!
    at NullInjector.get (core.mjs:5605:27)
    at R3Injector.get (core.mjs:6048:33)
    at R3Injector.get (core.mjs:6048:33)
    at R3Injector.get (core.mjs:6048:33)
    at ChainedInjector.get (core.mjs:15400:36)
    at lookupTokenUsingModuleInjector (core.mjs:4116:39)
    at getOrCreateInjectable (core.mjs:4164:12)
    at ɵɵdirectiveInject (core.mjs:11974:19)
    at NodeInjectorFactory.MatTooltip_Factory [as factory] (tooltip.mjs:642:343)
    at getNodeInjectable (core.mjs:4370:44)

I resolved it by importing MatTooltipModule into the component.

You might be able to resolve it by adding MatSelectModule.

Though, I speculate this fix is a band-aid.

[crisbeto]

Fixed in #28259.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}