refactor: use lightweight token for lazy menu content

goldens/size-test.yaml

@@ -1,2 +1,3 @@
 material/list/nav-list: 130473
 material/radio/without-group: 121448
+material/menu/without-lazy-content: 210751

integration/size-test/material/menu/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "without-lazy-content",
+    file = "without-lazy-content.ts",
+    deps = ["//src/material/menu"],
+)

integration/size-test/material/menu/without-lazy-content.ts

@@ -0,0 +1,24 @@
+import {Component, NgModule} from '@angular/core';
+import {MatMenuModule} from '@angular/material/menu';
+import {platformBrowser} from '@angular/platform-browser';
+
+/**
+ * Basic component using `MatMenu` and `MatMenuTrigger`. No lazy `MatMenuContent` is
+ * specified, so it should be tree-shaken away.
+ */
+@Component({
+  template: `
+    <button [matMenuTriggerFor]="menu">Open</button>
+    <mat-menu #menu="matMenu"></mat-menu>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatMenuModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}
+
+platformBrowser().bootstrapModule(AppModule);

src/material/menu/menu-content.ts

@@ -14,18 +14,27 @@ import {
   ComponentFactoryResolver,
   Directive,
   Inject,
+  InjectionToken,
   Injector,
   OnDestroy,
   TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
 import {Subject} from 'rxjs';
 
+/**
+ * Injection token that can be used to reference instances of `MatMenuContent`. It serves
+ * as alternative token to the actual `MatMenuContent` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_MENU_CONTENT = new InjectionToken<MatMenuContent>('MatMenuContent');
+
 /**
  * Menu content that will be rendered lazily once the menu is opened.
  */
 @Directive({
-  selector: 'ng-template[matMenuContent]'
+  selector: 'ng-template[matMenuContent]',
+  providers: [{provide: MAT_MENU_CONTENT, useExisting: MatMenuContent}],
 })
 export class MatMenuContent implements OnDestroy {
   private _portal: TemplatePortal<any>;

src/material/menu/menu.ts

@@ -43,7 +43,7 @@ import {
 import {merge, Observable, Subject, Subscription} from 'rxjs';
 import {startWith, switchMap, take} from 'rxjs/operators';
 import {matMenuAnimations} from './menu-animations';
-import {MatMenuContent} from './menu-content';
+import {MAT_MENU_CONTENT, MatMenuContent} from './menu-content';
 import {MenuPositionX, MenuPositionY} from './menu-positions';
 import {throwMatMenuInvalidPositionX, throwMatMenuInvalidPositionY} from './menu-errors';
 import {MatMenuItem} from './menu-item';
@@ -179,11 +179,12 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
    */
   @ContentChildren(MatMenuItem, {descendants: false}) items: QueryList<MatMenuItem>;
 
+  // TODO: Remove cast once https://github.com/angular/angular/pull/37506 is available.
   /**
    * Menu content that will be rendered lazily.
    * @docs-private
    */
-  @ContentChild(MatMenuContent) lazyContent: MatMenuContent;
+  @ContentChild(MAT_MENU_CONTENT as any) lazyContent: MatMenuContent;
 
   /** Whether the menu should overlap its trigger. */
   @Input()

tools/public_api_guard/material/menu.d.ts

@@ -65,6 +65,8 @@ export declare class _MatMenuDirectivesModule {
 
 export declare const fadeInItems: AnimationTriggerMetadata;
 
+export declare const MAT_MENU_CONTENT: InjectionToken<MatMenuContent>;
+
 export declare const MAT_MENU_DEFAULT_OPTIONS: InjectionToken<MatMenuDefaultOptions>;
 
 export declare const MAT_MENU_PANEL: InjectionToken<MatMenuPanel<any>>;