Allow custom decorators that use lifecycle hooks in AoT - these are our version of hooks, but we can't use them

[alshdavid]

When writing a custom decorator, lifecycle methods you patch are removed in AoT because the compiler doesn't check that custom decorators are using them.

This results in an inability to create custom decorators with any meaningful component specific behaviour.

React uses hooks to help patch into setup/teardown of your functional components, decorators are Angulars form of hooks. It would be super useful to have this functionality in Angular.

[christopher-kiss]

@alshdavid,

It looks like the onChanges life cycle works, but ngOnInit doesn't. Using a production build running with AoT, in the console I can see required and on changes, but not init. Switching to JIT development I correctly see the init messages.

Would be great to have this fixed.

export function RequiredInput<TValue>(defaultValue?: TValue) {
    return function<TInstance extends { [P in TKey]: TValue }, TKey extends keyof TInstance>(
        propertyClass: TInstance & Target,
        propertyKey: TKey & string
    ) {
        console.log('required');
      
        const originalInit = propertyClass.ngOnInit;
        const originalChanges = propertyClass.ngOnChanges;

        propertyClass.ngOnChanges = function(changes: SimpleChanges) {
            console.log('on changes');
             if (originalChanges) {
                 originalChanges.apply(this, [changes]);
             }
        };

        propertyClass.ngOnInit = function() {
            console.log('init');
            if (originalInit) {
                 originalInit.apply(this);
            }
        };
    };
}

Edit -
As a workaround, I've had to resort to creating a class that implements these and extend this class.

export abstract class RequiredClass implements OnInit, OnChanges {
    public ngOnInit() {}
    public ngOnChanges(_: SimpleChanges) {}
}

@Component({ ... })
public TestComponent extends RequiredClass {}

[alshdavid]

If it's hard for the compiler to statically analyse a custom decorator to determine what lifecycle methods are being patched, perhaps a basic solution like using comments which target the compiler will be a simple temporary solution.

eg

// @AoT [ 'ngOnInit', 'onDestroy' ]
export function RequiredInput<TValue>(defaultValue?: TValue) {
    ...
}

[trotyl]

Duplicate of #16023

[alxhub]

I have some good news!

In Ivy, lifecycle hooks are purely a runtime concern. They're read off the prototype of the component as soon as the first instance is created, which means that if a decorator adds hooks to the prototype then Ivy will notice them.

[stupidawesome]

@alxhub Should this be working in 8.0? I enabled Ivy and tried adding hooks with decorators using renderComponent() and platformBrowserDynamic().bootstrapModule() but it still doesn't work in AoT without adding an empty stub to the class definition.

Should this code theoretically work?

@Component()
export class MyComponent {}

MyComponent.prototype.ngOnInit = function () {
    console.log("init fired")
}

[trotyl]

@alxhub

They're read off the prototype of the component as soon as the first instance is created

This is not true, lifecycle hooks are determined in defineComponent(), which happen when the constructor is created, not the instance.

lifecycle hooks are purely a runtime concern.

However, decorators* are also purely a runtime concern, as explained in #16023 (comment), decorators runs after static properties, can be reproduce easily in TypeScript playground.

When defineComponent() get called, all the decorators hasn't being executed yet, so no methods can be found in the prototype.

_{The current decorator proposal has changed to compile-time semantics, but what implemented in TypeScript is still the obsolete stage-0 proposal.}

[christopher-kiss]

@trotyl,

So it looks like this is blocked until Typescript updates the decorator implementation? Which doesn't look like it's in a release plan yet: https://github.com/Microsoft/TypeScript/wiki/Roadmap#future

[trotyl]

So it looks like this is blocked until Typescript updates the decorator implementation?

@ChristopherKiss I really don't know, the decisions are made by Angular team, I have no way to change their mind.

[mhevery]

Here is how it should work in Ivy: https://ng-run.com/edit/TIbZM8JylZuhdZCM5KdO

Unfortunately this works only in JIT mode (but fails in AOT mode). The issue is that in AOT mode the @Component decorator is converted into defineComponent assignment which runs before the decorator has a chance to run. As a result the defineComponent collects the lifecycle hooks before the custom decorator has a chance to run.

[klemenoslaj]

@mhevery Will this be supported by AOT in the future?
If so, maybe we could take the risk and use target.ɵcmp until then.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}