Angular 角2元件库

我正在尝试创建一个组件库，可以通过npm与任何人共享。我正在用网页构建我的组件库。当我尝试将我的组件库安装到Angular 2项目的模块中时，该项目的模块无法识别我的组件库模块的名称

在我的应用程序中我这样做

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

我的组件库有以下文件夹结构

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

我的条形图.component.ts如下所示

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...

    }

}

import '@angular/core';

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

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

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

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

我的索引.ts如下所示

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...

    }

}

import '@angular/core';

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

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

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

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

我的tsconfig.json看起来像这样

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...

    }

}

import '@angular/core';

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

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

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

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

---

有什么想法吗？我错过了什么？我读过很多博客和教程（都是angular的旧版本），但我似乎无法让它工作。这是我尝试过的文章之一：显然AOT和非AOT之间有区别，运气不好。

确保库的package.json包含主字段（请参阅），该字段应该是包含模块的transpiled.js文件

我使用创建了一个组件库，并能够使其正常工作

---

另外，这里有一个使用Angular CLI创建组件库的极好示例：请参见和。

在应用程序的systems.config.js文件中添加一个条目可以解决您的问题：在map对象中，添加如下内容……'您的包名“：”npm:your package name/path to main file.js“，但我相信这可以以更好的方式解决。我没有使用system.js，我使用webpack捆绑我的组件库。my package.json有一个main属性，它指向“compiled”我的dist文件夹中的索引文件。下面是一个关于如何使用Angular CLI创建组件库的极好示例：1）演示应用程序-2）演示库-我在本地路径中将ng demo lib上的package.json更新为ng demo lib以测试这一点。