angular cli不仅可以很方便的让开发者创建自己的项目，组件，模块，变异等，还可以实现创建和发布自己的库（library）。这里主要还用到了ng-packagr的库。下面我们看下步骤

参考文章： Building an Angular 4 Component Library with the Angular CLI and ng-packagr

安装node， npm， angular cli

npm install @angularcli -g

创建我们的angular项目

ng new my-component-library

cd进入项目路径下安装依赖，启动

cd my-component-library

npm install

ng serve

这时候，我们的项目启动起来了，可以通过localhost：4200访问了。

下面让我们创建一个header的组件并做成通用的lib来使用。

创建header 模块/组件

ng generate module modules/header

创建组件

ng generate component modules/header

然后在src/app/modules/header下会创建如下文件

header.component.css

header.component.html

header.component.spec.ts

header.component.ts

header.module.ts

编写header内容

header.component.html

<h1>

<ng-content></ng-content>

<h1>

加样式

header.component.css

h1 {

color: red;

}

导出我们编写的lib

在header.module.ts里添加export数组将HeaderModule加进去

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { HeaderComponent } from './header.component';

@NgModule({

imports: [

CommonModule

],

declarations: [

HeaderComponent

],

exports: [

HeaderComponent

]

})

export class HeaderModule { }

这样就将我们的HeaderMoudle导出可以在其他地方使用了。

在app.component.html里使用

先将header Module import进来。

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// import our module

import { HeaderModule } from './modules/header/header.module';

@NgModule({

        declarations: [

                AppComponent

        ],

        imports: [

                BrowserModule,

                HeaderModule // import it into our @NgModule block

        ],

        providers: [],

        bootstrap: [AppComponent]

})

export class AppModule { }

使用app.component.html

<app-header>Such Header</app-header>

这时候启动，如果能看到起作用了，说明开发完成就准备打包。如果有问题修改代码fix问题。

ng-packagr

安装

ng install ng-packagr --save-dev

或者将ng-packagr的配置加到package.json内执行

npm install

我们需要添加2个文件到我们的项目ng-package.json和public_api.ts

ng-package.json是用来配置ng-packagr和找到public_api.ts的路径

ng-package.json

{

    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",

    "lib": {

            "entryFile": "public_api.ts"

    }

}

Tips：如果有whitelistedNonPeerDependencies报错，在ng-package.json加入如下代码：

{

"$schema": "./node_modules/ng-packagr/ng-package.schema.json",

"lib": {

"entryFile": "public_api.ts"

},

"whitelistedNonPeerDependencies": [

"."

]

}

在public-api.ts导出header.module.ts

export * from './src/app/modules/header/header.module'

在package.json里配置ng-packagr的命令。（将private改成false以备将来要发布才library）

"scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e",

    "packagr": "ng-packagr -p ng-package.json"

},

"private": false

这时候我们就可以打包我们的package了

运行

npm run packagr

完成的时候会在根目录下生成dist目录，这就是我们的library了，可以再进入dist目录压缩

cd dist

npm pack

这时候在此目录下就生成

my-component-library-0.0.0.tgz

版本号是在package.json里定义的。这时候我们可以将此包通过npm install 安装就可以使用了。

npm install ../此包的相关路径/my-component-library-0.0.0.tgz在app.module.ts里import进去就可以使用了。

当然也可以发布到npm

需要

npm loggin

登录到npm

然后

npm publishe dist

发布出去就可以了。这里就没有发布了，需要发布的可以去尝试。遇到问题在谷歌吧。

angular CLI创建发布自己的angular2+组件库