refactor(list): use light-weight tokens for injecting parent lists

Angular Material list items currently optionally inject a parent `MatNavList`
or `MatList`. This has the downside of retaining these tokens at runtime
because they are used for dependency injection as values.

We can improve this by using so-called light-weight tokens. These allow
us to continue injecting parent list or nav-lists, but without the
risk of retaining the `MatList` and `MatNavList` classes with their
factories.

This was already the case before Angular v9 with View Engine, but
the issue significance increases with Ivy where factories are now
directly attached to the classes (such as `MatList` or `MatNavList`).

Using light-weight tokens avoids this issue and gives us an additional
size improvement. Notably this won't be an improvement when an
application uses both the nav-list and standard `MatList`.

Related to https://github.com/angular/angular-cli/issues/16866. More
context on light-weight tokens in:
https://hackmd.io/@mhevery/SyqDjUlrU#.

Author: devversion

goldens/size-test.json

@@ -1,3 +1,3 @@
 {
-  "material/list": 224424
+  "material/list": 215881
 }

src/material/list/list.ts

@@ -22,6 +22,8 @@ import {
   OnDestroy,
   ChangeDetectorRef,
   Input,
+  InjectionToken,
+  Inject,
 } from '@angular/core';
 import {
   CanDisable,
@@ -48,6 +50,20 @@ class MatListItemBase {}
 const _MatListItemMixinBase: CanDisableRippleCtor & typeof MatListItemBase =
     mixinDisableRipple(MatListItemBase);
 
+/**
+ * Injection token that can be used to inject instances of `MatList`. It serves as
+ * alternative token to the actual `MatList` class which could cause unnecessary
+ * retention of the class and its component metadata.
+ */
+export const MAT_LIST = new InjectionToken<MatList>('MatList');
+
+/**
+ * Injection token that can be used to inject instances of `MatNavList`. It serves as
+ * alternative token to the actual `MatNavList` class which could cause unnecessary
+ * retention of the class and its component metadata.
+ */
+export const MAT_NAV_LIST = new InjectionToken<MatNavList>('MatNavList');
+
 @Component({
   selector: 'mat-nav-list',
   exportAs: 'matNavList',
@@ -60,6 +76,7 @@ const _MatListItemMixinBase: CanDisableRippleCtor & typeof MatListItemBase =
   inputs: ['disableRipple', 'disabled'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{provide: MAT_NAV_LIST, useExisting: MatNavList}],
 })
 export class MatNavList extends _MatListMixinBase implements CanDisable, CanDisableRipple,
   OnChanges, OnDestroy {
@@ -89,6 +106,7 @@ export class MatNavList extends _MatListMixinBase implements CanDisable, CanDisa
   inputs: ['disableRipple', 'disabled'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{provide: MAT_LIST, useExisting: MatList}],
 })
 export class MatList extends _MatListMixinBase implements CanDisable, CanDisableRipple, OnChanges,
   OnDestroy {
@@ -187,8 +205,8 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
 
   constructor(private _element: ElementRef<HTMLElement>,
               _changeDetectorRef: ChangeDetectorRef,
-              @Optional() navList?: MatNavList,
-              @Optional() list?: MatList) {
+              @Optional() @Inject(MAT_NAV_LIST) navList?: MatNavList,
+              @Optional() @Inject(MAT_LIST) list?: MatList) {
     super();
     this._isInteractiveList = !!(navList || (list && list._getListType() === 'action-list'));
     this._list = navList || list;

tools/public_api_guard/material/list.d.ts

@@ -1,3 +1,7 @@
+export declare const MAT_LIST: InjectionToken<MatList>;
+
+export declare const MAT_NAV_LIST: InjectionToken<MatNavList>;
+
 export declare const MAT_SELECTION_LIST_VALUE_ACCESSOR: any;
 
 export declare class MatList extends _MatListMixinBase implements CanDisable, CanDisableRipple, OnChanges, OnDestroy {