title: HOW-TO: Angular library divided in independent feature sub libraries
body: <p>I am currently developing an Angular library (in <em>Angular v</em> <strong>8.1.0</strong>) and wondering how is it possible to have it <em>"split in different sub-libraries"</em>?</p>
  
  <p>For example, Angular (<code>@angular</code>) is split somehow in different "parts" like:</p>
  
  <ul>
  <li><code>@angular/common</code></li>
  <li><code>@angular/core</code></li>
  <li><code>@angular/forms</code></li>
  <li>etc.</li>
  </ul>
  
  <p>and for instance, <code>@angular/common</code> has different sub-directories available to import from:</p>
  
  <ul>
  <li><code>@angular/common/http</code></li>
  <li><code>@angular/common/locale</code></li>
  <li><code>@angular/common/testing</code></li>
  </ul>
  
  <p>I am wondering how to do this kind of structuring in my own Angular library to keep different context elements independent one of each other. Let's say my library is called <code>cool-lib</code> and there are different feature modules which contain their own services/components/etc: <code>common</code>, <code>featureA</code>, <code>featureB</code>.</p>
  
  <p>I would like to achieve something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { CommonService } from 'cool-lib/common';
  import { FeatAComponent, FeatAService } from 'cool-lib/feature-a';
  import { FeatBModule } from 'cool-lib/feature-b';
  </code></pre>
  
  <p>instead of having:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { 
    CommonService, 
    FeatAComponent, 
    FeatAService,
    FeatBModule
  } from 'cool-lib';
  </code></pre>
  
  <p>and it even also would be nice to be able to independently bump version numbers of the different feature modules or simply having installed only those that are going to be needed without having to install the whole libary (let's say I only need <code>featureA</code>).</p>
  
  <p>For example, having on my <strong>package.json</strong>:</p>
  
  <pre><code>{
    "dependencies": {
      "cool-lib/common": "1.0.0",
      "cool-lib/feature-a": "1.0.0",
      "cool-lib/feature-b": "1.3.0"
    }
  }
  </code></pre>
  
  <p>or just:</p>
  
  <pre><code>{
    "dependencies": {
      "cool-lib/feature-a": "1.0.0"
    }
  }
  </code></pre>
  
  <p>instead of: </p>
  
  <pre><code>{
    "dependencies": {
      "cool-lib": "1.0.0"
    }
  }
  </code></pre>
  
  <p>I have read a lot about creating Angular libraries so far, but couldn't find this specific use case as all of them cover just the very basics of creating and publishing them on npm... so any help on this is very welcomed!</p>