bug(cdk/menuitem): Combining `cdkMenu` and `ngTemplateOutlet` results in a `NullInjectorError`

[wwjhu]

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

No response

Description

Combining cdkMenu and ngTemplateOutlet results in a NullInjectorError

<ng-template #menuItems>
  <button class="example-menu-item" cdkMenuItem>Refresh</button>
  <button class="example-menu-item" cdkMenuItem>Settings</button>
  <button class="example-menu-item" cdkMenuItem>Help</button>
  <button class="example-menu-item" cdkMenuItem>Sign out</button>
</ng-template>

<ng-template #menu>
  <div class="example-menu" cdkMenu>
      <ng-container *ngTemplateOutlet="menuItems"></ng-container>
  </div>
</ng-template>

Reproduction

StackBlitz link: https://stackblitz.com/edit/wnmde6?file=src%2Fexample%2Fcdk-menu-standalone-menu-example.html Steps to reproduce:

1. Click the Click me! button

Expected Behavior

The menu opens

Actual Behavior

An expection is thrown and the menu won't open.

vendor.js:48536 ERROR NullInjectorError: R3InjectorError(Standalone[CdkMenuStandaloneMenuExample])[InjectionToken cdk-menu-stack -> InjectionToken cdk-menu-stack -> InjectionToken cdk-menu-stack]: 
  NullInjectorError: No provider for InjectionToken cdk-menu-stack!
    at NullInjector.get (vendor.js:43804:21)
    at R3Injector.get (vendor.js:45185:27)
    at R3Injector.get (vendor.js:45185:27)
    at R3Injector.get (vendor.js:45185:27)
    at ChainedInjector.get (vendor.js:57008:32)
    at lookupTokenUsingModuleInjector (vendor.js:47751:31)
    at getOrCreateInjectable (vendor.js:47797:10)
    at ɵɵdirectiveInject (vendor.js:52429:17)
    at ɵɵinject (vendor.js:43272:59)
    at inject (vendor.js:43357:10)

Environment

• Angular: 17.3.1
• CDK/Material: 17.3.1
• Browser(s): Brave 1.65.114 Chromium: 124.0.6367.60 (Official Build) (arm64)
• Operating System (e.g. Windows, macOS, Ubuntu): macOS 14.4.1

[kbrilla]

Won't https://github.com/angular/angular/pull/55389 fix this?

[crisbeto]

This is just how DI works: it's based on the declaration location in the template, not where the component is inserted. Closing since we can't do much about it on our end.

[angular-automatic-lock-bot[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.}