Use light-weight injection pattern for optimized tree-shaking/bundle size #19576

With Ivy, factories are directly attached to components, so we production bundles could end up with larger bundles if Angular components/directives are used as predicates for optional queries or DI.

See: angular/angular#36144 and https://github.com/angular/angular-cli/issues/16866.

Here is an example:

export class ListItem {
  constructor(@Optional() navigationList: NavList|null,
              @Optional() actionList: ActionList|null)
}

This will result in both NavList and ActionList being retained in production bundles as soon as the ListItem component/directive is used. It will become worse if NavList and ActionList have their own Angular factory/definition (that will also be retained now).

We need to go through our components and optimize these if they are affected by this issue that is now surfacing (more significantly) with Ivy.

Currently pending PRs:

• refactor(list): use light-weight tokens for injecting parent lists  #19568
  • List retains MatList and MatNavList:
• refactor: use light-weight token for optgroup to optimize bundle size #19577
  • Autocomplete retains MatOptgroup
  • Select retains MatOptgroup
  • MatOption retains MatOptgroup
• refactor: provide and use light-weight token for button-toggle group  #19591
  • MatButtonToggle always retains MatButtonToggleGroup.
• refactor: use light-weight token for form-field in range-picker input #19643
  • Date ranger picker input always retaining MatFormField
• refactor: use lightweight token for lazy menu content #19644
  • menu always retains MatMenuContent directive for lazy content
• refactor: use lightweight token for injecting radio group #19645
  • radio button always retains MatRadioGroup.
• refactor: use lightweight token for CDK accordion  #19676
  • CdkAccordionItem always retains CdkAccordion. Also affects MatExpansionPanel.
• refactor: use lightweight token in CDK drag-drop #19678
  • CdkDrag retains CdkDragHandle, CdkDragPlaceholder and CdkDragPreview
  • CdkDropList retains CdkDropListGroup.
• refactor: use lightweight token for chip avatar, remove and trailing icon #19693
  • MatChip retains MatChipRemove, MatChipAvatar and MatChipTrailingIcon
  • Same applies to the MDC implementation where a significant size improvement was noticeable.
• refactor(form-field): use lightweight token for optimized treeshaking  #19714
  • MatFormField retains MatError, MatHint, MatSuffix and MatPrefix.
  • Same applies to MDC version, except for MatHint that is intentionally retained there.
• Use lightweight token for tab group and select trigger #19728
  • MatSelect always retains MatSelectTrigger
  • MatTab always retains MatTabLabel and MatTabContent.

What we need upstream:

• NgForm used in MatChipList.
• FormGroupDirective used in MatChipList
• NgControl used in MatChipList.

What we should consider in the future?

• Directionality
• Using a light-weight token for the DateAdapter for better tree-shaking

Revisit after done:

• MDC equivalents