feat(ivy): support @Injectable on already decorated classes (#28523)

Previously, ngtsc would throw an error if two decorators were matched on
the same class simultaneously. However, @Injectable is a special case, and
it appears frequently on component, directive, and pipe classes. For pipes
in particular, it's a common pattern to treat the pipe class also as an
injectable service.

ngtsc actually lacked the capability to compile multiple matching
decorators on a class, so this commit adds support for that. Decorator
handlers (and thus the decorators they match) are classified into three
categories: PRIMARY, SHARED, and WEAK.

PRIMARY handlers compile decorators that cannot coexist with other primary
decorators. The handlers for Component, Directive, Pipe, and NgModule are
marked as PRIMARY. A class may only have one decorator from this group.

SHARED handlers compile decorators that can coexist with others. Injectable
is the only decorator in this category, meaning it's valid to put an
@Injectable decorator on a previously decorated class.

WEAK handlers behave like SHARED, but are dropped if any non-WEAK handler
matches a class. The handler which compiles ngBaseDef is WEAK, since
ngBaseDef is only needed if a class doesn't otherwise have a decorator.

Tests are added to validate that @Injectable can coexist with the other
decorators and that an error is generated when mixing the primaries.

PR Close #28523

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

@@ -624,6 +624,95 @@ describe('ngtsc behavioral tests', () => {
             'i0.ɵNgModuleDefWithMeta<TestModule, [typeof TestPipe, typeof TestCmp], never, never>');
   });
 
+  describe('multiple decorators on classes', () => {
+    it('should compile @Injectable on Components, Directives, Pipes, and Modules', () => {
+      env.tsconfig();
+      env.write('test.ts', `
+        import {Component, Directive, Injectable, NgModule, Pipe} from '@angular/core';
+
+        @Component({selector: 'test', template: 'test'})
+        @Injectable()
+        export class TestCmp {}
+
+        @Directive({selector: 'test'})
+        @Injectable()
+        export class TestDir {}
+
+        @Pipe({name: 'test'})
+        @Injectable()
+        export class TestPipe {}
+
+        @NgModule({declarations: [TestCmp, TestDir, TestPipe]})
+        @Injectable()
+        export class TestNgModule {}
+      `);
+
+      env.driveMain();
+      const jsContents = env.getContents('test.js');
+      const dtsContents = env.getContents('test.d.ts');
+
+      // Validate that each class has the primary definition.
+      expect(jsContents).toContain('TestCmp.ngComponentDef =');
+      expect(jsContents).toContain('TestDir.ngDirectiveDef =');
+      expect(jsContents).toContain('TestPipe.ngPipeDef =');
+      expect(jsContents).toContain('TestNgModule.ngModuleDef =');
+
+      // Validate that each class also has an injectable definition.
+      expect(jsContents).toContain('TestCmp.ngInjectableDef =');
+      expect(jsContents).toContain('TestDir.ngInjectableDef =');
+      expect(jsContents).toContain('TestPipe.ngInjectableDef =');
+      expect(jsContents).toContain('TestNgModule.ngInjectableDef =');
+
+      // Validate that each class's .d.ts declaration has the primary definition.
+      expect(dtsContents).toContain('ComponentDefWithMeta<TestCmp');
+      expect(dtsContents).toContain('DirectiveDefWithMeta<TestDir');
+      expect(dtsContents).toContain('PipeDefWithMeta<TestPipe');
+      expect(dtsContents).toContain('NgModuleDefWithMeta<TestNgModule');
+
+      // Validate that each class's .d.ts declaration also has an injectable definition.
+      expect(dtsContents).toContain('InjectableDef<TestCmp');
+      expect(dtsContents).toContain('InjectableDef<TestDir');
+      expect(dtsContents).toContain('InjectableDef<TestPipe');
+      expect(dtsContents).toContain('InjectableDef<TestNgModule');
+    });
+
+    it('should not compile a component and a directive annotation on the same class', () => {
+      env.tsconfig();
+      env.write('test.ts', `
+        import {Component, Directive} from '@angular/core';
+
+        @Component({selector: 'test', template: 'test'})
+        @Directive({selector: 'test'})
+        class ShouldNotCompile {}
+      `);
+
+      const errors = env.driveDiagnostics();
+      expect(errors.length).toBe(1);
+      expect(errors[0].messageText).toContain('Two incompatible decorators on class');
+    });
+
+
+
+    it('should leave decorators present on jit: true directives', () => {
+      env.tsconfig();
+      env.write('test.ts', `
+        import {Directive, Inject} from '@angular/core';
+
+        @Directive({
+          selector: 'test',
+          jit: true,
+        })
+        export class Test {
+          constructor(@Inject('foo') foo: string) {}
+        }
+      `);
+      env.driveMain();
+      const jsContents = env.getContents('test.js');
+      expect(jsContents).toContain('Directive({');
+      expect(jsContents).toContain('__param(0, Inject');
+    });
+  });
+
   describe('compiling invalid @Injectables', () => {
     describe('with strictInjectionParameters = true', () => {
       it('should give a compile-time error if an invalid @Injectable is used with no arguments',