Custom decorators not working using AoT and Ivy

🐞 bug report

Affected Package

The issue is caused by package @angular/compiler-cli (I guess)

Is this a regression?

I had never tried AoT with Ivy

Description

I have a custom property decorator like this:

export function Language(): PropertyDecorator {
    function DecoratorFactory(target: any): void {
        const targetNgOnInit: () => void = target.ngOnInit;
        function ngOnInit(this: any): void {
            
            // Just for example
            console.log('onInit');

            if (targetNgOnInit) {
                targetNgOnInit.apply(this);
            }
        }
        target.ngOnInit = ngOnInit;
    }
    return DecoratorFactory;
}

used as:

@Language() lang: string;

ngOnInit() {
  // For aot
}

• With AoT compiler, it works (it writes onInit in console)
• If I enable Ivy and disable AoT, it works
• If I enable Ivy and AoT, it doesn’t work

🔬 Minimal Reproduction

angular-ivy-decorators

🔥 Exception or Error

No errors during compilation or in console. The ngOnInit method in decorator function is ignored.

🌍 Your Environment

Angular Version:

Angular CLI: 8.1.1
Node: 10.14.2
OS: win32 x64
Angular: 8.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.1
@angular-devkit/build-angular     0.801.1
@angular-devkit/build-optimizer   0.801.1
@angular-devkit/build-webpack     0.801.1
@angular-devkit/core              8.1.1
@angular-devkit/schematics        8.1.1
@ngtools/webpack                  8.1.1
@schematics/angular               8.1.1
@schematics/update                0.801.1
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

Anything else relevant? Tried without success also the next version of Angular.

Thanks

[smnbbrv]

A 1-cent from me. Before Angular 9 I used a Memoize decorator across all my components in many apps and now it comes to the point that I can’t use it anymore.

  @Memoize()
  getPermission(account: Account) {
    return this.permissions.filter(p => account.permissions.includes(p.id));
  }

As one might see, the operation is quite heavy and I cache it after one run. Now after the production build (in a non-prod build it works fine) it simply throws the runtime error Reference error: Account is undefined. I spent quite a lot of time until it became clear that the decorator was the reason.

Sad, but looks like I need to find another way now, probably less magical.

However, this is a breaking change and it’s not mentioned anywhere. Maybe it’s worth to give at least some note that custom decorators will fail now on the components’ members

[smnbbrv]

This post will probably get million times downvoted, however my personal finding is since I use early beta versions of Angular 2: do not ever extend angular components and do not use custom decorators on angular components and their members. This always led to the problems; during upgrades 2 -> @angular/cli -> 4 -> 5 -> 6 -> 7 -> 8 -> 9 I rewrote tons of components just because of these two things.

Here are similar AoT issues that are not fixed for years and it seems to not happen soon https://github.com/angular/angular/issues/23038 https://github.com/angular/angular/issues/16023 and many others.

I clearly understand the reasoning behind. The decorators are changing the content, behaviour and the lifecycle of the components; they can actually rewrite everything we know of the component in the runtime. It’s really hard (impossible?) to catch this with the custom compiler and create a performant application. It’s a very hard job that Angular team is already doing. Thank you for that!

Maybe problem is not in Angular. Probably we should change the way we think.

But, Angular team, please help us. The framework documentation is super-silent about all these issues. I will probably repeat myself here https://github.com/angular/angular/issues/31495#issuecomment-583767197 and ask for the easiest solution. Maybe politically it’s not the best for angular, or there are some religious beliefs against that, but please add those two clear lines to the components’ documentation:

• we do not yet fully support components inheritance
• we do not yet fully support custom decorators on components

And then the issues like this would be resolved. The StackOverflow answers would not propose to extend components. People would not be annoyed of rewriting their applications.

I am pretty sure everybody here will have no problems with using no decorators. The only thing that is missing: this should be properly communicated.