Question

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

在我的应用中，我这样做......

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

我的组件lib有文件夹结构

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

我的 barchart.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...

    }

}

我的 bt.module.ts 看起来像这样......

import '@angular/core';

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

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

我的 index.ts 看起来像这样......

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

我的 tsconfig.json 看起来像这样......

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

有什么想法吗？我错过了什么？我已经阅读了很多博客和教程（都是使用较旧版本的角度），我似乎无法使它工作。这是我试过的文章之一：http://www.dzurico.com/how-to-create-an-angular-library显然AOT和NON-AOT之间存在差异，没有运气。

Answer 1

确保您的库的package.json包含主要字段（请参阅https://docs.npmjs.com/files/package.json#main），该字段应该是已包含模块的已转换的.js文件。

我使用https://github.com/flauc/angular2-generator创建了一个组件库，并且能够让它工作。

此外，这是使用Angular CLI创建组件库的一个很好的示例：请参阅https://github.com/nsmolenskii/ng-demo-lib和https://github.com/nsmolenskii/ng-demo-app。

Angular 2组件库

1 个答案: