Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task
wwjhu opened this issue Apr 23, 2024 · 1 comment
Open
1 task
Labels
needs triage This issue needs to be triaged by the team

Comments

@wwjhu
Copy link
Contributor

wwjhu commented Apr 23, 2024

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
@wwjhu wwjhu added the needs triage This issue needs to be triaged by the team label Apr 23, 2024
@kbrilla
Copy link

kbrilla commented Apr 26, 2024

Won't angular/angular#55389 fix this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage This issue needs to be triaged by the team
Projects
None yet
Development

No branches or pull requests

2 participants