CODEWITHSUNDEEP
angularnpm
coderdark
coderdark

Reputation: 1501

Angular 2 Component Library

I am trying to create a component library that I can share with anyone via npm. I am building my component lib with webpack. 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.

In my App I do this...

 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 {
    }

I have the following folder structure for my component lib...

bt-module
|_______src
|       |____barchart
|       |    |____barchart.component.ts
|       |    |____barchart.styles.scss
|       |____bt.module.ts
|       |____index.ts
|_______package.json
|_______tsconfig.json
|_______webpack.config.js

My barchart.component.ts is like this...

import {Component, OnInit, ViewChild, ElementRef, Input} from "@angular/core";

import * as d3 from 'd3'

@Component({
    selector: 'bar-chart',
    styles: [
        require('./barchart.styles').toString()
    ],
    template: '<div #barchart class="chart box"></div>'
})
export class BarChartComponent implements OnInit {

    @Input('data') data: Array<any>;

    @ViewChild('barchart') barchart: ElementRef;

    constructor() {
    }

    ngOnInit() {

        //barchart code here...

    }

}

My bt.module.ts looks like this...

import '@angular/core';

import {NgModule, ModuleWithProviders} from '@angular/core';
import {BarChartComponent} from "./barchart/barchart.component";

@NgModule({
    declarations: [
        BarChartComponent
    ],
    exports: [
        BarChartComponent
    ]
})
export class BTModule {
}

My index.ts looks like this...

export * from './barchart/barchart.component'
export * from './avs.module';

My tsconfig.json looks like this...

{
  "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
  }
}

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: http://www.dzurico.com/how-to-create-an-angular-library apperantly there is a difference between AOT and NON-AOT, no luck.

Upvotes: 4

Views: 1845

Answers (1)

Jared Tarnasky
Jared Tarnasky

Reputation: 146

Make sure the package.json for your library includes the main field (see https://docs.npmjs.com/files/package.json#main), which should be the transpiled .js file that has your module in it.

I created a component library using https://github.com/flauc/angular2-generator and was able to get it to work.

Also, here's an excellent example of creating a component library using the Angular CLI: See https://github.com/nsmolenskii/ng-demo-lib and https://github.com/nsmolenskii/ng-demo-app.

Upvotes: 3

Related Questions