Angular 4 AOT compiler does not support mixins

Question

Sometimes I use Mixins to inject repeated functions like slugUrl().

But it doesn't work with angular 4 compiler.

export function Mixin(decorators: Function[]) {
  return function (classFn: Function) {
    decorators.forEach(decorator => {
      Object.getOwnPropertyNames(decorator.prototype).forEach(name => {
        classFn.prototype[name] = decorator.prototype[name];
      });
    });
  };
}


@Mixin([BehaviorInjected])
export class FooComponent {

}

If I compile this code, compiler throws:

Property 'ngClassControl' does not exist on type 'FooComponent'.

Any ideas?

Edit: Since there was someone who asked, here's another example using TS mixins that reproduces the issue, this time at template level.

Components:

@Component({
    selector: 'home-page',
    template: '<test [tag]="tag"></test>'
})
export class HomePageComponent extends TaggedComponent(MyComponent) {
    public tag = 'hi there';
}

@Component({
    selector: 'test',
    template: '<div></div>'
})
export class TestComponent extends TaggedComponent(MyComponent) {}

Mixins:

type Constructor<T> = new(...args: any[]) => T;

export function TaggedComponent<T extends Constructor<{}>>(Base: T) {
     class TaggedBase extends Base {
        @Input() tag: string;
     };

     return TaggedBase;
}

export class MyComponent {
    protected subscriptions: Subscription = new Subscription();
  // ...
}

Error:

ERROR in Error: Template parse errors: Can't bind to 'tag' since it isn't a known property of 'test'. ("][tag]="tag">")

Answer 1

The main problem here is that angular compiler has limited functionality.(read more in the docs)

AOT compiler uses metadata that is generated by MetadataCollector. It uses typescript object model(tree of Node)(that's why AOT can be used only with typescript) to gather all information that is necessary to produce ngfactory (in some cases also ngsummary) files.

The examples you provided are completely different for AOT compiler:

1) Custom decorator

@Mixin([BehaviorInjected])
export class FooComponent {}

Angular MetadataCollector will include @Mixin decorator in metadata of FooComponent symbol(item in decorators array) but it will be skipped when aot StaticReflector will call simplify since Mixin decorator is not registered in special map that includes only strictly defined decorators (source code)

Moreover if we even include it in that map it still won't be executed during aot compilation because it is only available for supported decorators.

2) Call custom function

export class HomePageComponent extends TaggedComponent(MyComponent) {

MetadataCollector will add TaggedComponent to metadata collection as symbol like {__symbolic: 'error', message: 'Symbol reference expected'}; but it also will be skipped inside StaticReflector.

And as far as i know there is currently no solution to support it.

Answer 2

See https://github.com/angular/angular/issues/19145

I believe it is the same problem. Decorator inheritance is broken for mixins, so currently you will have to duplicate decorated properties.