title: Angular 2 Component Library
body: <p>I am trying to create a component library that I can share with anyone via <strong>npm</strong>. I am building my component lib with <strong>webpack</strong>.  When I try to install my component lib into an Angular 2 project's module, the project's module does not recognize the name of my component lib module. </p>
  
  <p>In my <strong>App</strong> I do this...</p>
  
  <pre><code> import '@angular/core';
  
      import {NgModule} from '@angular/core';
      import {BrowserModule} from '@angular/platform-browser';
      //it says it does not recognize the module name, I installed it via npm i bt-module.
      import {BarChartComponent} from "BTModule";
  
      @NgModule({
          imports: [
              BrowserModule,
              BTModule
          ],
          declarations: [
              AppComponent
          ],
          bootstrap: [AppComponent]
      })
      export class App {
      }
  </code></pre>
  
  <p>I have the following <strong>folder structure</strong> for my component lib...</p>
  
  <pre><code>bt-module
  |_______src
  |       |____barchart
  |       |    |____barchart.component.ts
  |       |    |____barchart.styles.scss
  |       |____bt.module.ts
  |       |____index.ts
  |_______package.json
  |_______tsconfig.json
  |_______webpack.config.js
  </code></pre>
  
  <p>My <strong>barchart.component.ts</strong> is like this...</p>
  
  <pre><code>import {Component, OnInit, ViewChild, ElementRef, Input} from "@angular/core";
  
  import * as d3 from 'd3'
  
  @Component({
      selector: 'bar-chart',
      styles: [
          require('./barchart.styles').toString()
      ],
      template: '&lt;div #barchart class="chart box"&gt;&lt;/div&gt;'
  })
  export class BarChartComponent implements OnInit {
  
      @Input('data') data: Array&lt;any&gt;;
  
      @ViewChild('barchart') barchart: ElementRef;
  
      constructor() {
      }
  
      ngOnInit() {
  
          //barchart code here...
  
      }
  
  }
  </code></pre>
  
  <p>My <strong>bt.module.ts</strong> looks like this...</p>
  
  <pre><code>import '@angular/core';
  
  import {NgModule, ModuleWithProviders} from '@angular/core';
  import {BarChartComponent} from "./barchart/barchart.component";
  
  @NgModule({
      declarations: [
          BarChartComponent
      ],
      exports: [
          BarChartComponent
      ]
  })
  export class BTModule {
  }
  </code></pre>
  
  <p>My <strong>index.ts</strong> looks like this...</p>
  
  <pre><code>export * from './barchart/barchart.component'
  export * from './avs.module';
  </code></pre>
  
  <p>My <strong>tsconfig.json</strong> looks like this...</p>
  
  <pre><code>{
    "compilerOptions": {
      "declaration": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [
        "es6",
        "es2015",
        "dom"
      ],
      "noImplicitAny": false,
      "target": "es5",
      "module": "es2015",
      "moduleResolution": "node",
      "sourceMap": true,
      "mapRoot": "",
      "outDir": "./release",
      "skipLibCheck": true,
      "suppressImplicitAnyIndexErrors": true,
      "baseUrl": "",
      "types": [
        "node"
      ],
      "typeRoots": [
        "node_modules/@types"
      ]
    },
    "compileOnSave": true,
    "exclude": [
      "node_modules/*",
      "**/*-aot.ts"
    ],
    "angularCompilerOptions": {
      "skipTemplateCodegen": true,
      "debug": true
    }
  }
  </code></pre>
  
  <p>Any ideas? What am I missing?  I have read many blogs and tutorials (which are all with older versions of angular) and I can't seem to make it work. This is one of the articles I have tried: <a href="http://www.dzurico.com/how-to-create-an-angular-library" rel="nofollow noreferrer">http://www.dzurico.com/how-to-create-an-angular-library</a> apperantly there is a difference between AOT and NON-AOT, no luck.</p>