Angular 2 Component Library

Question

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.

Adding an entry in the app's systems.config.js file solves your issue: in the map object, add something like this... 'your-package-name': 'npm:your-package-name/path-to-main-file.js' But I'm sure this can be solved in a better way.. — Andrea Alhena
– Andrea Alhena, Commented Dec 15, 2016 at 23:34
I am not using system.js, I am using webpack to bundle my component lib. — coderdark
– coderdark, Commented Dec 15, 2016 at 23:36

Jared Tarnasky · Accepted Answer · 2017-01-19 19:21:37Z

3

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.

edited Jan 19, 2017 at 19:21

answered Dec 23, 2016 at 17:07

Jared Tarnasky

1465 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

coderdark Over a year ago

my package.json has a main property and it points to the "compiled" index file in my dist folder.

Jared Tarnasky Over a year ago

Here's an excellent example of how to create a component library using the Angular CLI: 1) demo application-github.com/nsmolenskii/ng-demo-lib 2) demo library- github.com/nsmolenskii/ng-demo-app I updated the package.json on ng-demo-lib to ng-demo-lib in my local path to test this out.

Collectives™ on Stack Overflow

Angular 2 Component Library

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related