fix(compiler-cli): bypass static resolving of the component's changeDetection field in local compilation mode (#51848)

pmvald · dylhunn · commit 377a7abfda60 · 2023-09-26T09:11:15.000-07:00
Currently the field changeDetection undergoes some static analysis to check if it is `ChangeDetectionStrategy` enum. Such static check fails in local compilation mode in g3 as the symbol cannot be resolved. So in local compilation mode we bypass such resolving and just write the expression as is into the component definition. PR Close #51848
diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts
@@ -235,8 +235,14 @@ export class ComponentDecoratorHandler implements
     const encapsulation: number =
         resolveEnumValue(this.evaluator, component, 'encapsulation', 'ViewEncapsulation') ??
         ViewEncapsulation.Emulated;
-    const changeDetection: number|null =
-        resolveEnumValue(this.evaluator, component, 'changeDetection', 'ChangeDetectionStrategy');
+
+    let changeDetection: number|Expression|null = null;
+    if (this.compilationMode !== CompilationMode.LOCAL) {
+      changeDetection =
+          resolveEnumValue(this.evaluator, component, 'changeDetection', 'ChangeDetectionStrategy');
+    } else if (component.has('changeDetection')) {
+      changeDetection = new WrappedNodeExpr(component.get('changeDetection')!);
+    }
 
     let animations: Expression|null = null;
     let animationTriggerNames: AnimationTriggerNames|null = null;
@@ -459,6 +465,7 @@ export class ComponentDecoratorHandler implements
             ngContentSelectors: template.ngContentSelectors,
           },
           encapsulation,
+          changeDetection,
           interpolation: template.interpolationConfig ?? DEFAULT_INTERPOLATION_CONFIG,
           styles,
 
@@ -494,9 +501,7 @@ export class ComponentDecoratorHandler implements
       },
       diagnostics,
     };
-    if (changeDetection !== null) {
-      output.analysis!.meta.changeDetection = changeDetection;
-    }
+
     return output;
   }
 
diff --git a/packages/compiler-cli/test/ngtsc/local_compilation_spec.ts b/packages/compiler-cli/test/ngtsc/local_compilation_spec.ts
@@ -345,6 +345,27 @@ runInEachFileSystem(() => {
          });
     });
 
+    describe('component fields', () => {
+      it('should place the changeDetection as it is into the component def', () => {
+        env.write('test.ts', `
+          import {Component} from '@angular/core';
+          import {SomeWeirdThing} from 'some-where';
+          
+          @Component({
+            changeDetection: SomeWeirdThing,
+            template: '<span>Hello world!</span>',
+          })
+          export class MainComponent {
+          }
+          `);
+
+        env.driveMain();
+        const jsContents = env.getContents('test.js');
+
+        expect(jsContents).toContain('changeDetection: SomeWeirdThing');
+      });
+    });
+
     describe('constructor injection', () => {
       it('should include injector types with all possible import/injection styles into component factory',
          () => {
diff --git a/packages/compiler/src/jit_compiler_facade.ts b/packages/compiler/src/jit_compiler_facade.ts
@@ -208,7 +208,7 @@ export class CompilerFacadeImpl implements CompilerFacade {
       styles: [...facade.styles, ...template.styles],
       encapsulation: facade.encapsulation,
       interpolation,
-      changeDetection: facade.changeDetection,
+      changeDetection: facade.changeDetection ?? null,
       animations: facade.animations != null ? new WrappedNodeExpr(facade.animations) : null,
       viewProviders: facade.viewProviders != null ? new WrappedNodeExpr(facade.viewProviders) :
                                                     null,
diff --git a/packages/compiler/src/render3/partial/component.ts b/packages/compiler/src/render3/partial/component.ts
@@ -82,7 +82,11 @@ export function createComponentDefinitionMap(
   definitionMap.set('viewProviders', meta.viewProviders);
   definitionMap.set('animations', meta.animations);
 
-  if (meta.changeDetection !== undefined) {
+  if (meta.changeDetection !== null) {
+    if (typeof meta.changeDetection === 'object') {
+      throw new Error('Impossible state! Change detection flag is not resolved!');
+    }
+
     definitionMap.set(
         'changeDetection',
         o.importExpr(R3.ChangeDetectionStrategy)
diff --git a/packages/compiler/src/render3/view/api.ts b/packages/compiler/src/render3/view/api.ts
@@ -292,8 +292,12 @@ export interface R3ComponentMetadata<DeclarationT extends R3TemplateDependency>
 
   /**
    * Strategy used for detecting changes in the component.
+   *
+   * In global compilation mode the value is ChangeDetectionStrategy if available as it is
+   * statically resolved during analysis phase. Whereas in local compilation mode the value is the
+   * expression as appears in the decorator.
    */
-  changeDetection?: ChangeDetectionStrategy;
+  changeDetection: ChangeDetectionStrategy|o.Expression|null;
 
   /**
    * The imports expression as appears on the component decorate for standalone component. This
diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts
@@ -185,8 +185,6 @@ export function compileComponentFromMetadata(
   const templateTypeName = meta.name;
   const templateName = templateTypeName ? `${templateTypeName}_Template` : null;
 
-  const changeDetection = meta.changeDetection;
-
   // Template compilation is currently conditional as we're in the process of rewriting it.
   if (!USE_TEMPLATE_PIPELINE) {
     // This is the main path currently used in compilation, which compiles the template with the
@@ -313,9 +311,17 @@ export function compileComponentFromMetadata(
         'data', o.literalMap([{key: 'animation', value: meta.animations, quoted: false}]));
   }
 
-  // Only set the change detection flag if it's defined and it's not the default.
-  if (changeDetection != null && changeDetection !== core.ChangeDetectionStrategy.Default) {
-    definitionMap.set('changeDetection', o.literal(changeDetection));
+  // Setting change detection flag
+  if (meta.changeDetection !== null) {
+    if (typeof meta.changeDetection === 'number' &&
+        meta.changeDetection !== core.ChangeDetectionStrategy.Default) {
+      // changeDetection is resolved during analysis. Only set it if not the default.
+      definitionMap.set('changeDetection', o.literal(meta.changeDetection));
+    } else if (typeof meta.changeDetection === 'object') {
+      // changeDetection is not resolved during analysis (e.g., we are in local compilation mode).
+      // So place it as is.
+      definitionMap.set('changeDetection', meta.changeDetection);
+    }
   }
 
   const expression =
