Injectable decorator not recognized when used with custom decorator

🐞 bug report

Affected Package

The issue is caused by package @angular/compiler

Is this a regression?

Yes, since everything worked fine in previous versions (Angular 8, Angular 9)

Description

In my projects I use decorators and now for some reason the error is constantly shown, what does this mean and how to get around it? Is this a bug in Angular? The decorator is ordinary and made according to the TypeScript guide

import { Component, VERSION, Injectable } from '@angular/core';

// simple example
export function Decorator(): any {
    return function <T extends any>(parent: any) {
        return class extends parent {
            constructor(...args: any[]) {
                super(...args);
            }
        };
    };
}

@Decorator()
@Injectable()
class MyService {
  public world() {
    return 'world';
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [MyService]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  constructor(private my: MyService){
    console.log('hello', my.world())
  }
}

🔬 Minimal Reproduction

https://stackblitz.com/edit/token-invalid?file=src/app/app.component.ts

🔥 Exception or Error

DEPRECATED: DI is instantiating a token "" that inherits its @Injectable decorator but does not provide one itself.
This will become an error in a future version of Angular. Please add @Injectable() to the "" class.

🌍 Your Environment

Angular Version:

Angular 10.1

[tomstolarczuk]

For anybody still interested, this works:

export function Decorator(module: string): <T extends new (...args: any[]) => any>(target: T) => T {
  return function decorator<T extends new (...args: any[]) => any>(target: T): T {
    @Injectable()
    abstract class Decorated extends target {
	  someProp = 'someProp';
      // do something with decorated class
    }
    return Decorated;
  };
}


@Injectable({
  providedIn: 'root'
})
@Decorator()
export class SomeApiService {
  constructor(private http: HttpClient) {}

  someMethod(params: any): void {
    console.log(this.someProp);
  }
}

Tested on Angular 12.

[mkurcius]

As mentioned here: https://stackoverflow.com/a/53622493/4663231 Proxy and Reflect.construct can be used:

export function MyDecorator() {
  return (target: any) => {
    return new Proxy(target, {
      construct(clz, args) {
        console.log('before constructor');
        const obj = Reflect.construct(clz, args);
        console.log('after constructor');

        return obj;
      },
    });
  };
}

@MyDecorator()
@Injectable({ providedIn: 'root' })
export class MyClass {
  constructor(@Inject(DOCUMENT) private document: Document) {
    console.log('Impl (constructor)');
    console.log('document', this.document);
  }
}

@Injectable({ providedIn: 'root' })
export class MyService {
  constructor(private myClass: MyClass) {
    console.log('myClass', this.myClass);
  }
}

and the output is:

as you can see:

1. DI works without @Injectable inside custom decorator

2. returned class is the original one (not wrapped)