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
发布出去就可以了。这里就没有发布了，需要发布的可以去尝试。遇到问题在谷歌吧。
