保姆级的使用angular搭建自己的组件库

如果使用npm install 就可以安装自定义的组件库呢

1、 ng new projectname

此处的projectname为项目名称，我创建的为gram-angular2

2、 以创建一个gram.module和header.component为例。可以用cli命令或者手动创建

ng generate module modules/gram
ng generate component modules/header

3、在gram.module.ts添加内容

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from '../header/header.component';

@NgModule({
 declarations: [
 HeaderComponent  //这里改动了
 ],
 imports: [
 CommonModule
 ],
 exports: [
 HeaderComponent   //这里改动了
 ]
})
export class GramModule { }

exports确保将该模块中导出的组件可以被其它模块引入并使用。

4、添加GramModule到app.module中：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GramModule } from './modules/gram/gram.module';

@NgModule({
 declarations: [
 AppComponent,
 ],
 imports: [
 BrowserModule,
 GramModule   //这里改动了
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

此时，就可以在app.component.html使用HeaderComponent组件了：

ng-packagr

ng-packagr可以将ng项目编译并打包成一个umd规范的library，以便可以被其它的ng项目所使用。

5、安装ng-packagr：

npm install ng-packagr --save-dev 

在项目根目录下添加两个文件 ng-package.json 和 public_api.ts。

ng-package.json内容：

{
 "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
 "lib": {
 "entryFile": "public_api.ts"
 }
}

在public_api.ts中导出header.module.ts：

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

在package.json文件中添加packagr脚本命令，并将private属性设置为false：

"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

删除掉dependencies没有使用的依赖

7、运行packagr脚本命令

npm run packagr

结束后会生成一个dist文件夹，就是我们需要的library包了。还可以进一步将dist打包成tgz文件：

cd dist
npm pack

dist文件夹里就会多出一个ng-packagr-test-0.0.0.tgz，名称和版本号均取自package.json。

自此，我们就可以通过磁盘相对路径来安装自己的library了，如：

npm install ../../program-name/dist/gram-angular2-0.0.0.tgz  

8、通过自己的npm账号发布到npmjs，前提是确保包名是唯一的：

npm publish dist