Error AOT building a custom component decorator - Angular 5

Question

I've build a custom component decorator, as described here Inheritance of Angular 5 components with overriding the decorator properties.

    import { Component } from '@angular/core';

    export function ExtendedComponent(extendedConfig: Component = {}) {
        return function (target: Function) {
            const annotations = target['__annotations__'] || [],
                  parameters = target['__paramaters__'] || [],
                  propMetadata = target['__prop__metadata__'] || [];

            if (annotations.length > 0) {
                const parentAnnotations = Object.assign({}, annotations[0]);

                Object.keys(parentAnnotations).forEach(key => {
                    if (parentAnnotations.hasOwnProperty(key)) {
                        if (!extendedConfig.hasOwnProperty(key)) {
                            extendedConfig[key] = parentAnnotations[key];
                            annotations[0][key] = '';
                        } else {
                            if (extendedConfig[key] === parentAnnotations[key]){
                                 annotations[0][key] = '';
                            }
                        }
                    }
                });
            }

            return Component(extendedConfig )(target);
        };
    }

In use:

    @ExtendedComponent({
        selector: 'app-auto-complete',
    })
    export class AutoCompleteComponent extends AutoComplete {

        constructor() {
            super();
        }

        ngOnInit() {
        }
    }

It work perfectly in dev mode, but when I try to build it I get the following error:

    ERROR in : Can't bind to 'suggestions' since it isn't a known         property of 'cds-auto-complete'.
    1. If 'cds-auto-complete' is an Angular component and it has 'suggestions' input, then verify that it is part of this module.
    2. If 'cds-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("...

I've tried adding the CUSTOM_ELEMENTS_SCHEMA & NO_ERRORS_SCHEMA, but it doesn't help. Any ideas on a solution?

score 1 · Answer 1 · answered Oct 17 '18 at 09:52

Custom decorators like these do not work in AOT, because the compiler is looking for classes which have the @Component decorator. To fix this you have to add the @Component() decorator to the class as well (and remove the Component(extendedConfig)(target) in your custom decorator):

@Component({...})
@ExtendedComponent({
    selector: 'app-auto-complete',
})
export class AutoCompleteComponent extends AutoComplete {}

But I suppose this kinda defeats the purpose of your extended component.

You can see the complete github issue here. This is not the exact same issue, but it is the same cause

Thanks. The main reason I want to use a custom decorator, is so that I can use the parent (external library) components inline template. Do you know of any other ways I could do this? — d9nny, Oct 17 '18 at 14:50

Error AOT building a custom component decorator - Angular 5

1 Answers1