feat(common): make the CommonModule directives standalone

This commit updates the directives presents in the `CommonModule` and annotates them with the `standalone: true` flag. With that flag, the directives can now be imported individually, as well as imported via the `CommonModule`.

goldens/public-api/common/index.md

@@ -55,7 +55,7 @@ export class CommonModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<CommonModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CommonModule, [typeof i1.NgClass, typeof i2.NgComponentOutlet, typeof i3.NgForOf, typeof i4.NgIf, typeof i5.NgTemplateOutlet, typeof i6.NgStyle, typeof i7.NgSwitch, typeof i7.NgSwitchCase, typeof i7.NgSwitchDefault, typeof i8.NgPlural, typeof i8.NgPluralCase, typeof i9.AsyncPipe, typeof i10.UpperCasePipe, typeof i10.LowerCasePipe, typeof i11.JsonPipe, typeof i12.SlicePipe, typeof i13.DecimalPipe, typeof i13.PercentPipe, typeof i10.TitleCasePipe, typeof i13.CurrencyPipe, typeof i14.DatePipe, typeof i15.I18nPluralPipe, typeof i16.I18nSelectPipe, typeof i17.KeyValuePipe], never, [typeof i1.NgClass, typeof i2.NgComponentOutlet, typeof i3.NgForOf, typeof i4.NgIf, typeof i5.NgTemplateOutlet, typeof i6.NgStyle, typeof i7.NgSwitch, typeof i7.NgSwitchCase, typeof i7.NgSwitchDefault, typeof i8.NgPlural, typeof i8.NgPluralCase, typeof i9.AsyncPipe, typeof i10.UpperCasePipe, typeof i10.LowerCasePipe, typeof i11.JsonPipe, typeof i12.SlicePipe, typeof i13.DecimalPipe, typeof i13.PercentPipe, typeof i10.TitleCasePipe, typeof i13.CurrencyPipe, typeof i14.DatePipe, typeof i15.I18nPluralPipe, typeof i16.I18nSelectPipe, typeof i17.KeyValuePipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CommonModule, [typeof i1.AsyncPipe, typeof i2.UpperCasePipe, typeof i2.LowerCasePipe, typeof i3.JsonPipe, typeof i4.SlicePipe, typeof i5.DecimalPipe, typeof i5.PercentPipe, typeof i2.TitleCasePipe, typeof i5.CurrencyPipe, typeof i6.DatePipe, typeof i7.I18nPluralPipe, typeof i8.I18nSelectPipe, typeof i9.KeyValuePipe], [typeof i10.NgClass, typeof i11.NgComponentOutlet, typeof i12.NgForOf, typeof i13.NgIf, typeof i14.NgTemplateOutlet, typeof i15.NgStyle, typeof i16.NgSwitch, typeof i16.NgSwitchCase, typeof i16.NgSwitchDefault, typeof i17.NgPlural, typeof i17.NgPluralCase], [typeof i10.NgClass, typeof i11.NgComponentOutlet, typeof i12.NgForOf, typeof i13.NgIf, typeof i14.NgTemplateOutlet, typeof i15.NgStyle, typeof i16.NgSwitch, typeof i16.NgSwitchCase, typeof i16.NgSwitchDefault, typeof i17.NgPlural, typeof i17.NgPluralCase, typeof i1.AsyncPipe, typeof i2.UpperCasePipe, typeof i2.LowerCasePipe, typeof i3.JsonPipe, typeof i4.SlicePipe, typeof i5.DecimalPipe, typeof i5.PercentPipe, typeof i2.TitleCasePipe, typeof i5.CurrencyPipe, typeof i6.DatePipe, typeof i7.I18nPluralPipe, typeof i8.I18nSelectPipe, typeof i9.KeyValuePipe]>;
 }
 
 // @public
@@ -407,7 +407,7 @@ export class NgClass implements DoCheck {
     // (undocumented)
     ngDoCheck(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgClass, "[ngClass]", never, { "klass": "class"; "ngClass": "ngClass"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgClass, "[ngClass]", never, { "klass": "class"; "ngClass": "ngClass"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgClass, never>;
 }
@@ -430,7 +430,7 @@ export class NgComponentOutlet implements OnChanges, OnDestroy {
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgComponentOutlet, "[ngComponentOutlet]", never, { "ngComponentOutlet": "ngComponentOutlet"; "ngComponentOutletInjector": "ngComponentOutletInjector"; "ngComponentOutletContent": "ngComponentOutletContent"; "ngComponentOutletNgModule": "ngComponentOutletNgModule"; "ngComponentOutletNgModuleFactory": "ngComponentOutletNgModuleFactory"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgComponentOutlet, "[ngComponentOutlet]", never, { "ngComponentOutlet": "ngComponentOutlet"; "ngComponentOutletInjector": "ngComponentOutletInjector"; "ngComponentOutletContent": "ngComponentOutletContent"; "ngComponentOutletNgModule": "ngComponentOutletNgModule"; "ngComponentOutletNgModuleFactory": "ngComponentOutletNgModuleFactory"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgComponentOutlet, never>;
 }
@@ -446,7 +446,7 @@ export class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCh
     get ngForTrackBy(): TrackByFunction<T>;
     static ngTemplateContextGuard<T, U extends NgIterable<T>>(dir: NgForOf<T, U>, ctx: any): ctx is NgForOfContext<T, U>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgForOf<any, any>, "[ngFor][ngForOf]", never, { "ngForOf": "ngForOf"; "ngForTrackBy": "ngForTrackBy"; "ngForTemplate": "ngForTemplate"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgForOf<any, any>, "[ngFor][ngForOf]", never, { "ngForOf": "ngForOf"; "ngForTrackBy": "ngForTrackBy"; "ngForTemplate": "ngForTemplate"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgForOf<any, any>, never>;
 }
@@ -481,7 +481,7 @@ export class NgIf<T = unknown> {
     static ngTemplateContextGuard<T>(dir: NgIf<T>, ctx: any): ctx is NgIfContext<Exclude<T, false | 0 | '' | null | undefined>>;
     static ngTemplateGuard_ngIf: 'binding';
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgIf<any>, "[ngIf]", never, { "ngIf": "ngIf"; "ngIfThen": "ngIfThen"; "ngIfElse": "ngIfElse"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgIf<any>, "[ngIf]", never, { "ngIf": "ngIf"; "ngIfThen": "ngIfThen"; "ngIfElse": "ngIfElse"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgIf<any>, never>;
 }
@@ -525,7 +525,7 @@ export class NgPlural {
     // (undocumented)
     set ngPlural(value: number);
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgPlural, "[ngPlural]", never, { "ngPlural": "ngPlural"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgPlural, "[ngPlural]", never, { "ngPlural": "ngPlural"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgPlural, never>;
 }
@@ -536,7 +536,7 @@ export class NgPluralCase {
     // (undocumented)
     value: string;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgPluralCase, "[ngPluralCase]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgPluralCase, "[ngPluralCase]", never, {}, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgPluralCase, [{ attribute: "ngPluralCase"; }, null, null, { host: true; }]>;
 }
@@ -551,7 +551,7 @@ export class NgStyle implements DoCheck {
         [klass: string]: any;
     } | null);
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgStyle, "[ngStyle]", never, { "ngStyle": "ngStyle"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgStyle, "[ngStyle]", never, { "ngStyle": "ngStyle"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgStyle, never>;
 }
@@ -561,7 +561,7 @@ export class NgSwitch {
     // (undocumented)
     set ngSwitch(newValue: any);
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgSwitch, "[ngSwitch]", never, { "ngSwitch": "ngSwitch"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgSwitch, "[ngSwitch]", never, { "ngSwitch": "ngSwitch"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgSwitch, never>;
 }
@@ -572,7 +572,7 @@ export class NgSwitchCase implements DoCheck {
     ngDoCheck(): void;
     ngSwitchCase: any;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgSwitchCase, "[ngSwitchCase]", never, { "ngSwitchCase": "ngSwitchCase"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgSwitchCase, "[ngSwitchCase]", never, { "ngSwitchCase": "ngSwitchCase"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgSwitchCase, [null, null, { optional: true; host: true; }]>;
 }
@@ -581,7 +581,7 @@ export class NgSwitchCase implements DoCheck {
 export class NgSwitchDefault {
     constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef<Object>, ngSwitch: NgSwitch);
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgSwitchDefault, "[ngSwitchDefault]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgSwitchDefault, "[ngSwitchDefault]", never, {}, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgSwitchDefault, [null, null, { optional: true; host: true; }]>;
 }
@@ -595,7 +595,7 @@ export class NgTemplateOutlet implements OnChanges {
     ngTemplateOutletContext: Object | null;
     ngTemplateOutletInjector: Injector | null;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgTemplateOutlet, "[ngTemplateOutlet]", never, { "ngTemplateOutletContext": "ngTemplateOutletContext"; "ngTemplateOutlet": "ngTemplateOutlet"; "ngTemplateOutletInjector": "ngTemplateOutletInjector"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgTemplateOutlet, "[ngTemplateOutlet]", never, { "ngTemplateOutletContext": "ngTemplateOutletContext"; "ngTemplateOutlet": "ngTemplateOutlet"; "ngTemplateOutletInjector": "ngTemplateOutletInjector"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgTemplateOutlet, never>;
 }

packages/common/src/common_module.ts

@@ -29,7 +29,8 @@ import {COMMON_PIPES} from './pipes/index';
  * @publicApi
  */
 @NgModule({
-  declarations: [COMMON_DIRECTIVES, COMMON_PIPES],
+  imports: [COMMON_DIRECTIVES],
+  declarations: [COMMON_PIPES],
   exports: [COMMON_DIRECTIVES, COMMON_PIPES],
 })
 export class CommonModule {

packages/common/src/directives/ng_class.ts

@@ -37,7 +37,10 @@ type NgClassSupportedTypes = string[]|Set<string>|{[klass: string]: any}|null|un
  *
  * @publicApi
  */
-@Directive({selector: '[ngClass]'})
+@Directive({
+  selector: '[ngClass]',
+  standalone: true,
+})
 export class NgClass implements DoCheck {
   private _iterableDiffer: IterableDiffer<string>|null = null;
   private _keyValueDiffer: KeyValueDiffer<string, any>|null = null;

packages/common/src/directives/ng_component_outlet.ts

@@ -68,7 +68,10 @@ import {ComponentRef, createNgModuleRef, Directive, Injector, Input, NgModuleFac
  * @publicApi
  * @ngModule CommonModule
  */
-@Directive({selector: '[ngComponentOutlet]'})
+@Directive({
+  selector: '[ngComponentOutlet]',
+  standalone: true,
+})
 export class NgComponentOutlet implements OnChanges, OnDestroy {
   @Input() ngComponentOutlet: Type<any>|null = null;
 

packages/common/src/directives/ng_for_of.ts

@@ -129,7 +129,10 @@ export class NgForOfContext<T, U extends NgIterable<T> = NgIterable<T>> {
  * @ngModule CommonModule
  * @publicApi
  */
-@Directive({selector: '[ngFor][ngForOf]'})
+@Directive({
+  selector: '[ngFor][ngForOf]',
+  standalone: true,
+})
 export class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCheck {
   /**
    * The value of the iterable expression, which can be used as a

packages/common/src/directives/ng_if.ts

@@ -148,7 +148,10 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef, ɵstri
  * @ngModule CommonModule
  * @publicApi
  */
-@Directive({selector: '[ngIf]'})
+@Directive({
+  selector: '[ngIf]',
+  standalone: true,
+})
 export class NgIf<T = unknown> {
   private _context: NgIfContext<T> = new NgIfContext<T>();
   private _thenTemplateRef: TemplateRef<NgIfContext<T>>|null = null;

packages/common/src/directives/ng_plural.ts

@@ -44,7 +44,10 @@ import {SwitchView} from './ng_switch';
  *
  * @publicApi
  */
-@Directive({selector: '[ngPlural]'})
+@Directive({
+  selector: '[ngPlural]',
+  standalone: true,
+})
 export class NgPlural {
   // TODO(issue/24571): remove '!'.
   private _switchValue!: number;
@@ -104,7 +107,10 @@ export class NgPlural {
  *
  * @publicApi
  */
-@Directive({selector: '[ngPluralCase]'})
+@Directive({
+  selector: '[ngPluralCase]',
+  standalone: true,
+})
 export class NgPluralCase {
   constructor(
       @Attribute('ngPluralCase') public value: string, template: TemplateRef<Object>,

packages/common/src/directives/ng_style.ts

@@ -44,7 +44,10 @@ import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer,
  *
  * @publicApi
  */
-@Directive({selector: '[ngStyle]'})
+@Directive({
+  selector: '[ngStyle]',
+  standalone: true,
+})
 export class NgStyle implements DoCheck {
   private _ngStyle: {[key: string]: string}|null = null;
   private _differ: KeyValueDiffer<string, string|number>|null = null;

packages/common/src/directives/ng_switch.ts

@@ -101,7 +101,10 @@ export class SwitchView {
  * @see [Structural Directives](guide/structural-directives)
  *
  */
-@Directive({selector: '[ngSwitch]'})
+@Directive({
+  selector: '[ngSwitch]',
+  standalone: true,
+})
 export class NgSwitch {
   // TODO(issue/24571): remove '!'.
   private _defaultViews!: SwitchView[];
@@ -189,7 +192,10 @@ export class NgSwitch {
  * @see `NgSwitchDefault`
  *
  */
-@Directive({selector: '[ngSwitchCase]'})
+@Directive({
+  selector: '[ngSwitchCase]',
+  standalone: true,
+})
 export class NgSwitchCase implements DoCheck {
   private _view: SwitchView;
   /**
@@ -231,7 +237,10 @@ export class NgSwitchCase implements DoCheck {
  * @see `NgSwitchCase`
  *
  */
-@Directive({selector: '[ngSwitchDefault]'})
+@Directive({
+  selector: '[ngSwitchDefault]',
+  standalone: true,
+})
 export class NgSwitchDefault {
   constructor(
       viewContainer: ViewContainerRef, templateRef: TemplateRef<Object>,

packages/common/src/directives/ng_template_outlet.ts

@@ -32,7 +32,10 @@ import {Directive, EmbeddedViewRef, Injector, Input, OnChanges, SimpleChanges, T
  *
  * @publicApi
  */
-@Directive({selector: '[ngTemplateOutlet]'})
+@Directive({
+  selector: '[ngTemplateOutlet]',
+  standalone: true,
+})
 export class NgTemplateOutlet implements OnChanges {
   private _viewRef: EmbeddedViewRef<any>|null = null;