title: How to create an Angular library to be distributed with more than one component
body: <p>I'm trying to create an Angular library to be distributed with more than one component but I couldn't make it work. It works with only one component. This is how I made it for one component:</p>
  
  <p>I have a folder called sample-library. Inside the <strong>src</strong> I have:</p>
  
  <p><strong>package.json</strong>:</p>
  
  <pre><code>{
    "name": "sample-library",
    "version": "0.1.0",
    "author": {
      "name": "IG"
    },
    "keywords": [
      "angular"
    ],
    "license": "MIT",
    "main": "sample-library.umd.js",
    "module": "sample-library.js",
    "jsnext:main": "sample-library.js",
    "typings": "sample-library.d.ts",
    "peerDependencies": {
      ...
    }
  }
  </code></pre>
  
  <p><strong>tsconfig.es5.json</strong>:</p>
  
  <pre><code>{
    "compilerOptions": {
      "declaration": true,
      "module": "es2015",
      "target": "es5",
      "baseUrl": ".",
      "stripInternal": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "moduleResolution": "node",
      "outDir": "../build",
      "rootDir": ".",
      "lib": [
        "es2015",
        "dom"
      ],
      "skipLibCheck": true,
      "types": []
    },
    "angularCompilerOptions": {
      "annotateForClosureCompiler": true,
      "strictMetadataEmit": true,
      "skipTemplateCodegen": true,
      "flatModuleOutFile": "sample-library.js",
      "flatModuleId": "sample-library"
    },
    "files": [
      "./index.ts"
    ]
  }
  </code></pre>
  
  <p><strong>index.ts</strong>:</p>
  
  <pre><code>import { NgModule, ModuleWithProviders } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { SampleComponent } from './sample.component';
  
  export * from './sample.component';
  
  @NgModule({
    imports: [
      CommonModule
    ],
    declarations: [
      SampleComponent
    ],
    exports: [
      SampleComponent
    ]
  })
  export class SampleModule {
    static forRoot(): ModuleWithProviders {
      return {
        ngModule: SampleModule,
        providers: []
      };
    }
  }
  </code></pre>
  
  <p>I also have <strong>sample-library.component.hml</strong>, <strong>sample-library.component.scss</strong> and <strong>sample-library.component.ts</strong> inside src.</p>
  
  <p>This way works correctly. But I don't know how I can add another component in the same library following a similar way. Any idea?</p>