fix(ivy): proper resolution of Enums in Component decorator (#27971)

Prior to this change Component decorator was resolving `encapsulation` value a bit incorrectly, which resulted in `encapsulation: NaN` in compiled code. Now we resolve the value as Enum memeber and throw if it's not the case. As a part of this update, the `changeDetection` field handling is also added, the resolution logic is the same as the one used for `encapsulation` field.

PR Close #27971

packages/compiler-cli/test/ngtsc/fake_core/index.ts

@@ -64,3 +64,15 @@ export interface SimpleChanges { [propName: string]: any; }
 
 export type ɵNgModuleDefWithMeta<ModuleT, DeclarationsT, ImportsT, ExportsT> = any;
 export type ɵDirectiveDefWithMeta<DirT, SelectorT, ExportAsT, InputsT, OutputsT, QueriesT> = any;
+
+export enum ViewEncapsulation {
+  Emulated = 0,
+  Native = 1,
+  None = 2,
+  ShadowDom = 3
+}
+
+export enum ChangeDetectionStrategy {
+  OnPush = 0,
+  Default = 1
+}

packages/compiler-cli/test/ngtsc/ngtsc_spec.ts

@@ -820,6 +820,73 @@ describe('ngtsc behavioral tests', () => {
     expect(jsContents).toContain('interpolation1("", ctx.text, "")');
   });
 
+  it('should handle `encapsulation` field', () => {
+    env.tsconfig();
+    env.write(`test.ts`, `
+      import {Component, ViewEncapsulation} from '@angular/core';
+      @Component({
+        selector: 'comp-a',
+        template: '...',
+        encapsulation: ViewEncapsulation.None
+      })
+      class CompA {}
+    `);
+
+    env.driveMain();
+    const jsContents = env.getContents('test.js');
+    expect(jsContents).toContain('encapsulation: 2');
+  });
+
+  it('should throw if `encapsulation` contains invalid value', () => {
+    env.tsconfig();
+    env.write('test.ts', `
+      import {Component} from '@angular/core';
+      @Component({
+        selector: 'comp-a',
+        template: '...',
+        encapsulation: 'invalid-value'
+      })
+      class CompA {}
+    `);
+    const errors = env.driveDiagnostics();
+    expect(errors[0].messageText)
+        .toContain('encapsulation must be a member of ViewEncapsulation enum from @angular/core');
+  });
+
+  it('should handle `changeDetection` field', () => {
+    env.tsconfig();
+    env.write(`test.ts`, `
+      import {Component, ChangeDetectionStrategy} from '@angular/core';
+      @Component({
+        selector: 'comp-a',
+        template: '...',
+        changeDetection: ChangeDetectionStrategy.OnPush
+      })
+      class CompA {}
+    `);
+
+    env.driveMain();
+    const jsContents = env.getContents('test.js');
+    expect(jsContents).toContain('changeDetection: 0');
+  });
+
+  it('should throw if `changeDetection` contains invalid value', () => {
+    env.tsconfig();
+    env.write('test.ts', `
+      import {Component} from '@angular/core';
+      @Component({
+        selector: 'comp-a',
+        template: '...',
+        changeDetection: 'invalid-value'
+      })
+      class CompA {}
+    `);
+    const errors = env.driveDiagnostics();
+    expect(errors[0].messageText)
+        .toContain(
+            'changeDetection must be a member of ChangeDetectionStrategy enum from @angular/core');
+  });
+
   it('should correctly recognize local symbols', () => {
     env.tsconfig();
     env.write('module.ts', `