perf(forms): make RadioControlRegistry class tree-shakable

AndrewKushnir · AndrewKushnir · commit d0d2d5987f0d · 2021-03-12T17:28:04.000-08:00
This commit makes the `RadioControlRegistry` class tree-shakable by adding the `providedIn` property to its
`@Injectable` decorator. Now if the radio buttons are not used in the app (thus no `RadioControlValueAccessor`
directive is initialized), the `RadioControlRegistry` should not be included into application's prod bundle.
diff --git a/goldens/public-api/forms/forms.d.ts b/goldens/public-api/forms/forms.d.ts
@@ -477,7 +477,7 @@ export declare class RadioControlValueAccessor extends ɵangular_packages_forms_
     onChange: () => void;
     onTouched: () => void;
     value: any;
-    constructor(_renderer: Renderer2, _elementRef: ElementRef, _registry: ɵangular_packages_forms_forms_o, _injector: Injector);
+    constructor(_renderer: Renderer2, _elementRef: ElementRef, _registry: ɵangular_packages_forms_forms_p, _injector: Injector);
     fireUncheck(value: any): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -450,7 +450,7 @@
     "name": "R3ViewContainerRef"
   },
   {
-    "name": "RadioControlRegistry"
+    "name": "RadioControlRegistryModule"
   },
   {
     "name": "ReactiveFormsComponent"
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -447,7 +447,7 @@
     "name": "REQUIRED_VALIDATOR"
   },
   {
-    "name": "RadioControlRegistry"
+    "name": "RadioControlRegistryModule"
   },
   {
     "name": "RecordViewTuple"
diff --git a/packages/forms/src/directives.ts b/packages/forms/src/directives.ts
@@ -16,7 +16,7 @@ import {NgModel} from './directives/ng_model';
 import {NgModelGroup} from './directives/ng_model_group';
 import {NgNoValidate} from './directives/ng_no_validate_directive';
 import {NumberValueAccessor} from './directives/number_value_accessor';
-import {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
+import {RadioControlRegistryModule, RadioControlValueAccessor} from './directives/radio_control_value_accessor';
 import {RangeValueAccessor} from './directives/range_value_accessor';
 import {FormControlDirective} from './directives/reactive_directives/form_control_directive';
 import {FormControlName} from './directives/reactive_directives/form_control_name';
@@ -77,6 +77,7 @@ export const REACTIVE_DRIVEN_DIRECTIVES: Type<any>[] =
  */
 @NgModule({
   declarations: SHARED_FORM_DIRECTIVES,
+  imports: [RadioControlRegistryModule],
   exports: SHARED_FORM_DIRECTIVES,
 })
 export class ɵInternalFormsSharedModule {
diff --git a/packages/forms/src/directives/radio_control_value_accessor.ts b/packages/forms/src/directives/radio_control_value_accessor.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, forwardRef, Injectable, Injector, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
+import {Directive, ElementRef, forwardRef, Injectable, Injector, Input, NgModule, OnDestroy, OnInit, Renderer2} from '@angular/core';
 
 import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 import {NgControl} from './ng_control';
@@ -24,11 +24,21 @@ function throwNameError() {
     `);
 }
 
+/**
+ * Internal-only NgModule that works as a host for the `RadioControlRegistry` tree-shakable
+ * provider. Note: the `InternalFormsSharedModule` can not be used here directly, since it's
+ * declared *after* the `RadioControlRegistry` class and the `providedIn` doesn't support
+ * `forwardRef` logic.
+ */
+@NgModule()
+export class RadioControlRegistryModule {
+}
+
 /**
  * @description
  * Class used by Angular to track radio buttons. For internal use only.
  */
-@Injectable()
+@Injectable({providedIn: RadioControlRegistryModule})
 export class RadioControlRegistry {
   private _accessors: any[] = [];
 
diff --git a/packages/forms/src/form_providers.ts b/packages/forms/src/form_providers.ts
@@ -9,20 +9,21 @@
 import {ModuleWithProviders, NgModule} from '@angular/core';
 
 import {InternalFormsSharedModule, NG_MODEL_WITH_FORM_CONTROL_WARNING, REACTIVE_DRIVEN_DIRECTIVES, TEMPLATE_DRIVEN_DIRECTIVES} from './directives';
-import {RadioControlRegistry} from './directives/radio_control_value_accessor';
 
 /**
  * Exports the required providers and directives for template-driven forms,
  * making them available for import by NgModules that import this module.
  *
+ * Providers associated with this module:
+ * * `RadioControlRegistry`
+ *
  * @see [Forms Overview](/guide/forms-overview)
  * @see [Template-driven Forms Guide](/guide/forms)
  *
  * @publicApi
  */
 @NgModule({
   declarations: TEMPLATE_DRIVEN_DIRECTIVES,
-  providers: [RadioControlRegistry],
   exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
 })
 export class FormsModule {
@@ -32,16 +33,17 @@ export class FormsModule {
  * Exports the required infrastructure and directives for reactive forms,
  * making them available for import by NgModules that import this module.
  *
+ * Providers associated with this module:
+ * * `FormBuilder`
+ * * `RadioControlRegistry`
+ *
  * @see [Forms Overview](guide/forms-overview)
  * @see [Reactive Forms Guide](guide/reactive-forms)
  *
  * @publicApi
  */
 @NgModule({
   declarations: [REACTIVE_DRIVEN_DIRECTIVES],
-  // Note: FormBuilder is also provided in this module as a tree-shakable provider,
-  // see packages/forms/src/form_builder.ts.
-  providers: [RadioControlRegistry],
   exports: [InternalFormsSharedModule, REACTIVE_DRIVEN_DIRECTIVES]
 })
 export class ReactiveFormsModule {

Original file line number	Diff line number	Diff line change
`@@ -450,7 +450,7 @@`
`450`	`450`	`"name": "R3ViewContainerRef"`
`451`	`451`	`},`
`452`	`452`	`{`
`453`		`- "name": "RadioControlRegistry"`
	`453`	`+ "name": "RadioControlRegistryModule"`
`454`	`454`	`},`
`455`	`455`	`{`
`456`	`456`	`"name": "ReactiveFormsComponent"`
Original file line number	Diff line number	Diff line change
`@@ -447,7 +447,7 @@`
`447`	`447`	`"name": "REQUIRED_VALIDATOR"`
`448`	`448`	`},`
`449`	`449`	`{`
`450`		`- "name": "RadioControlRegistry"`
	`450`	`+ "name": "RadioControlRegistryModule"`
`451`	`451`	`},`
`452`	`452`	`{`
`453`	`453`	`"name": "RecordViewTuple"`