refactor(compiler): Throw an error when old and new animations are used together

This adds a new compilation error if someone attempts to put legacy animations and `animate.enter` or `animate.leave` in the same component.

Author: thePunderWoman

goldens/public-api/compiler-cli/error_code.api.md

@@ -6,6 +6,7 @@
 
 // @public (undocumented)
 export enum ErrorCode {
+    COMPONENT_ANIMATIONS_CONFLICT = 2027,
     COMPONENT_IMPORT_NOT_STANDALONE = 2011,
     COMPONENT_INVALID_SHADOW_DOM_SELECTOR = 2009,
     COMPONENT_INVALID_STYLE_URLS = 2021,

packages/compiler-cli/src/ngtsc/annotations/component/src/animations.ts

@@ -13,6 +13,7 @@ import {
   TmplAstElement,
 } from '@angular/compiler';
 
+const ANIMATE_ENTER = 'animate.enter';
 const ANIMATE_LEAVE = `animate.leave`;
 
 /**
@@ -25,26 +26,24 @@ export function analyzeTemplateForAnimations(template: TmplAstNode[]): {
   const analyzer = new AnimationsAnalyzer();
   tmplAstVisitAll(analyzer, template);
 
-  // The template is considered selectorless only if there
-  // are direct references to directives or pipes.
   return {hasAnimations: analyzer.hasAnimations};
 }
 
 /**
  * Visitor that traverses all the template nodes and
- * expressions to look for selectorless references.
+ * expressions to look for animation references.
  */
 class AnimationsAnalyzer extends CombinedRecursiveAstVisitor {
   hasAnimations: boolean = false;
 
   override visitElement(element: TmplAstElement): void {
     for (const attr of element.attributes) {
-      if (attr.name === ANIMATE_LEAVE) {
+      if (attr.name === ANIMATE_LEAVE || attr.name === ANIMATE_ENTER) {
         this.hasAnimations = true;
       }
     }
     for (const input of element.inputs) {
-      if (input.name === ANIMATE_LEAVE) {
+      if (input.name === ANIMATE_LEAVE || input.name === ANIMATE_ENTER) {
         this.hasAnimations = true;
       }
     }

packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts

@@ -198,6 +198,7 @@ import {extractHmrMetatadata, getHmrUpdateDeclaration} from '../../../hmr';
 import {getProjectRelativePath} from '../../../util/src/path';
 import {ComponentScope} from '../../../scope/src/api';
 import {analyzeTemplateForSelectorless} from './selectorless';
+import {analyzeTemplateForAnimations} from './animations';
 
 const EMPTY_ARRAY: any[] = [];
 
@@ -767,6 +768,24 @@ export class ComponentDecoratorHandler
         }
       }
     }
+
+    if (component.has('animations')) {
+      const {hasAnimations} = analyzeTemplateForAnimations(template.nodes);
+      if (hasAnimations) {
+        if (diagnostics === undefined) {
+          diagnostics = [];
+        }
+        diagnostics.push(
+          makeDiagnostic(
+            ErrorCode.COMPONENT_ANIMATIONS_CONFLICT,
+            component.get('animations')!,
+            `A component cannot have both the 'animations' property and use 'animate.enter' or 'animate.leave' in the template.`,
+          ),
+        );
+        isPoisoned = true;
+      }
+    }
+
     const templateResource: Resource = template.declaration.isInline
       ? {path: null, node: component.get('template')!}
       : {

packages/compiler-cli/src/ngtsc/diagnostics/src/error_code.ts

@@ -178,6 +178,12 @@ export enum ErrorCode {
    */
   UNSUPPORTED_SELECTORLESS_COMPONENT_FIELD = 2026,
 
+  /**
+   * A component is using both the `animations` property and `animate.enter` or `animate.leave`
+   * in the template.
+   */
+  COMPONENT_ANIMATIONS_CONFLICT = 2027,
+
   SYMBOL_NOT_EXPORTED = 3001,
   /**
    * Raised when a relationship between directives and/or pipes would cause a cyclic import to be

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

@@ -299,30 +299,48 @@ runInEachFileSystem((os: string) => {
         expect(updateInstances?.length).toBe(1);
       });
 
-      it('should compile animate.enter with a host binding string', () => {
+      it('should throw an error when legacy animations are used with animate.enter', () => {
         env.write(
           'test.ts',
           `
-          import {Component, signal, ViewChild, ElementRef} from '@angular/core';
+          import {Component} from '@angular/core';
 
           @Component({
             selector: 'test-cmp',
-            host: {'animate.enter': 'fade'},
-            template:
-              '<div><p>I should slide in</p></div>',
+            template: '<div animate.enter="some-class"></div>',
+            animations: [],
           })
-          class TestComponent {
-            show = signal(false);
-          }
+          class TestComponent {}
         `,
         );
 
-        env.driveMain();
+        const diags = env.driveDiagnostics();
+        expect(diags.length).toBe(1);
+        expect(diags[0].messageText).toContain(
+          `A component cannot have both the 'animations' property and use 'animate.enter' or 'animate.leave' in the template.`,
+        );
+      });
 
-        const jsContents = env.getContents('test.js');
-        expect(jsContents).toContain('i0.ɵɵanimateEnter("fade");');
-        const updateInstances = jsContents.match(/ɵɵanimateEnter\(/g);
-        expect(updateInstances?.length).toBe(1);
+      it('should throw an error when legacy animations are used with animate.leave', () => {
+        env.write(
+          'test.ts',
+          `
+          import {Component} from '@angular/core';
+
+          @Component({
+            selector: 'test-cmp',
+            template: '<div animate.leave="some-class"></div>',
+            animations: [],
+          })
+          class TestComponent {}
+        `,
+        );
+
+        const diags = env.driveDiagnostics();
+        expect(diags.length).toBe(1);
+        expect(diags[0].messageText).toContain(
+          `A component cannot have both the 'animations' property and use 'animate.enter' or 'animate.leave' in the template.`,
+        );
       });
     });