Use lightweight token for tab group and select trigger

goldens/size-test.yaml

@@ -13,4 +13,6 @@ material/form-field/basic: 185008
 material/list/nav-list: 130473
 material/menu/without-lazy-content: 210751
 material/radio/without-group: 121448
-material/select/without-optgroup: 256564
+material/select/basic: 256613
+material/tabs/advanced: 183627
+material/tabs/basic: 182824

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

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

integration/size-test/material/select/without-optgroup.ts → integration/size-test/material/select/basic.ts

@@ -3,7 +3,8 @@ import {MatSelectModule} from '@angular/material/select';
 
 /**
  * Basic component using `MatSelect` and `MatOption`. Other supported parts of the
- * select like `MatOptgroup` are not used and should be tree-shaken away.
+ * select like `MatOptgroup` or `MatSelectTrigger` are not used and should be
+ * tree-shaken away.
  */
 @Component({
   template: `

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

@@ -0,0 +1,13 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "basic",
+    file = "basic.ts",
+    deps = ["//src/material/tabs"],
+)
+
+size_test(
+    name = "advanced",
+    file = "advanced.ts",
+    deps = ["//src/material/tabs"],
+)

integration/size-test/material/tabs/advanced.ts

@@ -0,0 +1,25 @@
+import {Component, NgModule} from '@angular/core';
+import {MatTabsModule} from '@angular/material/tabs';
+
+/**
+ * Advanced component using `MatTabGroup` and `MatTab` in combination with
+ * lazy `MatTabContent` and `MatTabLabel`.
+ */
+@Component({
+  template: `
+    <mat-tab-group>
+      <mat-tab>
+        <ng-template matTabLabel>Label</ng-template>
+        <ng-template matTabContent>Content</ng-template>
+      </mat-tab>
+    </mat-tab-group>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatTabsModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}

integration/size-test/material/tabs/basic.ts

@@ -0,0 +1,23 @@
+import {Component, NgModule} from '@angular/core';
+import {MatTabsModule} from '@angular/material/tabs';
+
+/**
+ * Basic component using `MatTabGroup` and `MatTab`. Other parts of the tabs
+ * module such as lazy `MatTabContent` or `MatTabLabel` are not used and should
+ * be tree-shaken away.
+ */
+@Component({
+  template: `
+    <mat-tab-group>
+      <mat-tab label="Hello">Content</mat-tab>
+    </mat-tab-group>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatTabsModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}

src/material/select/select.ts

@@ -198,11 +198,20 @@ const _MatSelectMixinBase:
         mixinDisableRipple(mixinTabIndex(mixinDisabled(mixinErrorState(MatSelectBase))));
 
 
+
+/**
+ * Injection token that can be used to reference instances of `MatSelectTrigger`. It serves as
+ * alternative token to the actual `MatSelectTrigger` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_SELECT_TRIGGER = new InjectionToken<MatSelectTrigger>('MatSelectTrigger');
+
 /**
  * Allows the user to customize the trigger that is displayed when the select has a value.
  */
 @Directive({
-  selector: 'mat-select-trigger'
+  selector: 'mat-select-trigger',
+  providers: [{provide: MAT_SELECT_TRIGGER, useExisting: MatSelectTrigger}],
 })
 export class MatSelectTrigger {}
 
@@ -372,8 +381,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
   @Input() panelClass: string|string[]|Set<string>|{[key: string]: any};
 
+  // TODO: Remove cast once https://github.com/angular/angular/pull/37506 is available.
   /** User-supplied override of the trigger element. */
-  @ContentChild(MatSelectTrigger) customTrigger: MatSelectTrigger;
+  @ContentChild(MAT_SELECT_TRIGGER as any) customTrigger: MatSelectTrigger;
 
   /** Placeholder to be shown if no value has been selected. */
   @Input()

src/material/tabs/tab-content.ts

@@ -6,10 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, TemplateRef} from '@angular/core';
+import {Directive, InjectionToken, TemplateRef} from '@angular/core';
+
+/**
+ * Injection token that can be used to reference instances of `MatTabContent`. It serves as
+ * alternative token to the actual `MatTabContent` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_TAB_CONTENT = new InjectionToken<MatTabContent>('MatTabContent');
 
 /** Decorates the `ng-template` tags and reads out the template from it. */
-@Directive({selector: '[matTabContent]'})
+@Directive({
+  selector: '[matTabContent]',
+  providers: [{provide: MAT_TAB_CONTENT, useExisting: MatTabContent}],
+})
 export class MatTabContent {
   constructor(public template: TemplateRef<any>) { }
 }

src/material/tabs/tab-label.ts

@@ -6,11 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive} from '@angular/core';
+import {Directive, InjectionToken} from '@angular/core';
 import {CdkPortal} from '@angular/cdk/portal';
 
+/**
+ * Injection token that can be used to reference instances of `MatTabLabel`. It serves as
+ * alternative token to the actual `MatTabLabel` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_TAB_LABEL = new InjectionToken<MatTabLabel>('MatTabLabel');
+
 /** Used to flag tab labels for use with the portal directive */
 @Directive({
   selector: '[mat-tab-label], [matTabLabel]',
+  providers: [{provide: MAT_TAB_LABEL, useExisting: MatTabLabel}],
 })
 export class MatTabLabel extends CdkPortal {}

src/material/tabs/tab.ts

@@ -27,8 +27,8 @@ import {
 } from '@angular/core';
 import {CanDisable, CanDisableCtor, mixinDisabled} from '@angular/material/core';
 import {Subject} from 'rxjs';
-import {MatTabContent} from './tab-content';
-import {MatTabLabel} from './tab-label';
+import {MAT_TAB_CONTENT} from './tab-content';
+import {MAT_TAB_LABEL, MatTabLabel} from './tab-label';
 
 
 // Boilerplate for applying mixins to MatTab.
@@ -53,8 +53,9 @@ export const MAT_TAB_GROUP = new InjectionToken<any>('MAT_TAB_GROUP');
   exportAs: 'matTab',
 })
 export class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy {
+  // TODO: Remove cast once https://github.com/angular/angular/pull/37506 is available.
   /** Content for the tab label given by `<ng-template mat-tab-label>`. */
-  @ContentChild(MatTabLabel)
+  @ContentChild(MAT_TAB_LABEL as any)
   get templateLabel(): MatTabLabel { return this._templateLabel; }
   set templateLabel(value: MatTabLabel) {
     // Only update the templateLabel via query if there is actually
@@ -67,10 +68,11 @@ export class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnCh
   }
   private _templateLabel: MatTabLabel;
 
+  // TODO: Remove cast once https://github.com/angular/angular/pull/37506 is available.
   /**
    * Template provided in the tab content that will be used if present, used to enable lazy-loading
    */
-  @ContentChild(MatTabContent, {read: TemplateRef, static: true})
+  @ContentChild(MAT_TAB_CONTENT as any, {read: TemplateRef, static: true})
   _explicitContent: TemplateRef<any>;
 
   /** Template inside the MatTab view that contains an `<ng-content>`. */

tools/public_api_guard/material/select.d.ts

@@ -10,6 +10,8 @@ export declare const MAT_SELECT_SCROLL_STRATEGY_PROVIDER: {
 
 export declare function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;
 
+export declare const MAT_SELECT_TRIGGER: InjectionToken<MatSelectTrigger>;
+
 export declare class MatSelect extends _MatSelectMixinBase implements AfterContentInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, CanDisable, HasTabIndex, MatFormFieldControl<any>, CanUpdateErrorState, CanDisableRipple {
     _ariaDescribedby: string;
     readonly _closedStream: Observable<void>;