title: Angular 6 Component Inheritance
body: <p>I'm looking for the way to go for reusing and extending components in other modules. I've found angular's dynamic component loading on their docs site, but I do not know if thats the correct way for extending components.</p>
  
  <p>I'm currently upgrading an AngularJS app which consists of two angularJs modules. The main module which is used by clients and another module which extends parts of the main module and is used by internals.</p>
  
  <p>In AngularJS we just extended directives and services from the main app and bootstrapped them separately.</p>
  
  <p>I would like to do similar in Angular 6. I use a base module, which consists of all the components used in both apps. In both apps I extend them and load them via dynamic component loading. </p>
  
  <p>I setup a stackblitz example here: <a href="https://stackblitz.com/edit/component-inheritance-example" rel="nofollow noreferrer">https://stackblitz.com/edit/component-inheritance-example</a></p>
  
  <p>I would love to know if that's a way to go or if I am completely on the wrong path. </p>
  
  <p>I do not like having to use a helper component for that. I would like to have a kind of interceptor whichs load the right component on rendering the selector, but I do not know if thats possible.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Thats the way we did it in angularjs:  </p>
  
  <p><code>angular.module('childApp').directive('parentDirective', () =&gt; return new OverriddenDirective())</code></p>
  
  <p><code>angular.module('parentApp').run(...)</code><br>
  <code>angular.module('childApp').run(...)</code></p>