Repository: angular
Issue: @Injectable does not play well with other class decorators
Labels: area: core,P3

### Which @angular/* package(s) are relevant/related to the feature request?

_No response_

### Description

Class decorators such as this one to facilitate reactive class properties raise a deprecation warning.

stateful.decorator.ts
```ts
import { Observable, ReplaySubject } from 'rxjs'

import type { StrictConstructor } from './constructor'


/**
 * @decorator Stateful
 * @description a decorator to facilitate state event firing on updates
 * Note: This is meant to be used with the @After decorator and the
 * emitPropertyChange helper function. See the spec file for an example of use
 */

interface State {
  [property: string]: any
}

interface StatefulObservable {
  state$: Observable<State>
}

interface StatefulSubject {
  state: ReplaySubject<State>
}

export interface Stateful<T> {
  state$: Observable<T>
}

export function Stateful<T>(): ClassDecorator {
  // because of the generic, we must use the parameterized form of the decorator
  return function <TFunction extends StrictConstructor>(target: TFunction) {
    const k = class extends target implements StatefulObservable {
      private state: ReplaySubject<T>
      public state$: Observable<T>

      constructor(...args: any[]) {
        super(...args)
        this.state = new ReplaySubject<T>()
        this.state$ = this.state.asObservable()
      }
    }
    Object.defineProperty(k, 'name', {value: target.name})
    return k
  } as ClassDecorator
}

export function emitPropertyChange(property: string) {
  return function (this: StatefulSubject): void {
    this.state.next({ [property]: (this as any)[property] })
  }
}
```

such used here:
```ts
import { Injectable } from '@angular/core';
import { first } from 'rxjs';

import { After } from '~common/utilities/aop/after.decorator';
import { 
  emitPropertyChange, Stateful 
} from '~common/utilities/stateful.decorator';
import { EndpointService } from '~common/services/endpoint/endpoint.service';
import { Product } from '../product.interface';
import { ProductsSource } from '../products-source.interface';
import { ProductServicesModule } from './product-services.module';
import { Endpoints } from '~/config/environments/endpoints';

export interface ProductsSource {
  products: Array<Product>
}

export interface LocalService extends Stateful<ProductsSource> {}

@Injectable({
  providedIn: ProductServicesModule
})
@Stateful<ProductsSource>()
export class LocalService {
  products?: Array<Product>
  
  constructor(private endpointService: EndpointService) { }

  @After(emitPropertyChange(Endpoints.Products))
  private setProducts(products: Array<Product>) {
    this.products = products
  }

  getProducts() {
    this.endpointService
      .getEndpoint<Array<Product>>({ endpoint: String(Endpoints.Products) })
      .pipe(first())
      .subscribe(this.setProducts.bind(this))
  }
}
```

to avoid the deprecation I have to extend a base class to use my behavior
```ts
@Stateful<ProductsSource>()
class LSBase {}

..
export class LocalService extends LSBase {
...
  
  constructor(private endpointService: EndpointService) { 
    super();
  }
```


### Proposed solution

do not implement Injectables in a fashion that cannot play well wiht other class decorators. Remove the deprecation or change the implementation

### Alternatives considered

I think this might be a change in typescript because previously simply controlling the order of the decorators appeared to be sufficient. It is no longer the case for reasons that are not entirely clear to me.

versions:
    "@angular/core": "~13.2.0",

    "typescript": "~4.5.2"