CODEWITHSUNDEEP
angularinheritancewebpackangular-cliaot
Nathaniel Rink
Nathaniel Rink

Reputation: 523

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

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?

Upvotes: 1

Views: 1211

Answers (1)

Mau
Mau

Reputation: 61

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.

Upvotes: 1

Related Questions