Extend a component with same selector - Angular 2 / Angular-CLI

Question

We're using angular to build a nice component front end for our core application. We have multiple clients who request very minor customisation of those core components. I want to preserve our core code in NPM packages and then make those slight modifications by extending components in each client app.

In order to do this I need to extend a child component, but keep the same selector (otherwise I have to modify each parent component).

I've been able to do this with aot=false builds by importing the original component into the extending component and using a relative link to the node_modules for the templateUrl. Then I declare the extending component in the app.module and drop the original component from the app.module (so the selectors don't conflict).

This works fine as long as aot=false, but with aot true, I get a "ERROR in Cannot determine the module for class " error for the original component on build.

Is there any way to extend one component from another, keep the selector the same, and still benefit from AOT compilation?

You could use base classes without @Component() annotations and only add those to the concrete implementarions. — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 18, 2017 at 5:03
Can you please share the decision that you took? Did you take Mau's advice? — tedw
– tedw, Commented Oct 8, 2020 at 15:35
I'm really sorry. I think we probably never got past leaving aot=false because I left the project shortly after this question was posted. I think @Mau is right that my approach needed to be reconsidered. I'd probably look into mixins if I were approaching this again. This is a helpful article medium.com/@jordan.eckowitz/… Wish I had a better response for you — Nathaniel Rink
– Nathaniel Rink, Commented Oct 8, 2020 at 21:39

Mau · Accepted Answer · 2017-12-18 14:27:40Z

1

Not sure you can achieve your goal without changing strategy (take a look at selector-conflicts).

Personally, I would try to use the dynamic component loader mechanism combined with a customer class (Injection Beyond Classes) that gives you the right implementation of your component: if you have a customer one, you load that; otherwise the default one.

Of course, components will have different selectors.

edited Dec 18, 2017 at 14:27

answered Dec 18, 2017 at 14:02

Mau

715 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Extend a component with same selector - Angular 2 / Angular-CLI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related