using decorator with component providers which uses a function breaks the component

I have a function that creates a form provider:

export function createFormProvider<T>(component: Type<T>): ExistingProvider {
  return {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => component),
    multi: true
  };
}

It being widely used across the app. When I decorate a component which uses it with @UntilDestroy(), the component breaks with the following: Uncaught ReferenceError: UserSelectComponent_1 is not defined

@UntilDestroy()
@Component({
	selector: 'user-select',
	templateUrl: './user-select.component.html',
	encapsulation: ViewEncapsulation.None,
	changeDetection: ChangeDetectionStrategy.OnPush,
	providers: [createFormProvider(UserSelectComponent)]
})
export class UserSelectComponent extends ControlValueAccessor<string | string[]> implements OnInit, AfterViewInit, OnDestroy {
... 
}

However, when using the same but without a function in providers, it works as expected:

@UntilDestroy()
@Component({
	selector: 'user-select',
	templateUrl: './user-select.component.html',
	encapsulation: ViewEncapsulation.None,
	changeDetection: ChangeDetectionStrategy.OnPush,
	providers: [
            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UserSelectComponent), multi: true }
        ]
})
export class UserSelectComponent extends ControlValueAccessor<string | string[]> implements OnInit, AfterViewInit, OnDestroy {
... 
}

[arturovt]

Well, seems like settings "target": "es2015" in tsconfig solved the issue. it was es5

but, why?

Closing.

Targetting ES2015 emits top-level variable that references your class:

var UserSelectComponent_1;

function createFormProvider(component) { ... }

let UserSelectComponent = (UserSelectComponent_1 = class UserSelectComponent {
});

setClassMetadata(UserSelectComponent, [
  ...,
  {
    providers: [createFormProvider(UserSelectComponent_1)]
  }
])

UserSelectComponent_1 is defined in this case before the function is invoked.

ES5 emitted code looks as following:

function createFormProvider(component) { ... }

var UserSelectComponent = (function () {
  function UserSelectComponent() {}
  UserSelectComponent_1 = UserSelectComponent;
  var UserSelectComponent_1;
  return UserSelectComponent;
})();

setClassMetadata(UserSelectComponent, [
  {
    providers: [createFormProvider(UserSelectComponent_1)]
  }
])

Notice that it references the wrong variable which is declared inside the self-invoked function.

[danzrou]

Thanks for the info @arturovt