1.創(chuàng)建并修改項目
安裝Angular命令行工具：
npm install -g @angular/cli
創(chuàng)建一個空應用, 前綴通常是公司、組織、姓名簡稱，ll這里是我姓名簡稱：
ng new ll-angular --create-application=false
初始化組件庫, --prefix: 前綴, 在用命令行新建組件/指令時，selector的屬性值的前綴:
cd ll-angular
ng generate library components --prefix ll?
創(chuàng)建測試應用, --minimal: 創(chuàng)建一個沒有任何測試框架的簡單項目：
ng generate application examples --minimal=true
此例中將components.xxx.*改為hello-world.xxx.*，并將 components.module.ts 重構為 ll-components.module放到lib同級, 該module中可導入多個component。
├── dist? ? ? ? ? ? ? ? ? ? ? ? ? // 組件打包后的目錄
├── projects
│? ├── components? ? ? ? ? ? ? ? // 組件所在目錄
│? │? ├── src
│? │? │? ├── lib
│? │? │? │? ├── hello-world? // hello-world組件
│? │? │? │? │? ├── hello-world.component.scss
│? │? │? │? │? ├── hello-world.component.html
│? │? │? │? │? └── hello-world.component.ts
│? │? │? ├── ll-components.module.ts // 導入多個組件
│? │? │? ├── public-api.ts // 導入components-name.module
│? │? │? ├── karma.conf.js
│? │? │? ├── ng-package.json
│? │? │? ├── package.json
│? │? │? ├── tsconfig.lib.json
│? │? │? ├── tsconfig.spec.json
│? │? │? ├── tslint.json
│? │? │? ├── README.md
│? ├── examples
├── .editorconfig
├── .gitignore
├── angular.json
├── package.json
├── README.md
├── tsconfig.json
└── tslint.json
其中public-api-ts內容為
export*from'./components-name.module';
在本例中，如之前沒添加前綴，修改 angular.json 中的 prefix的"lib"為"ll"，它會自動給每個新建的組件增加'll-'前綴。
將components/src/package.json中的name更改為ll-components，注意這里的名稱就是要publish到npm的組件庫名稱，如果組件庫名稱已存在是無法上傳成功的。
{"name":"ll-components","version":"0.0.1",// 每次更新組件后版本號都要提升再發(fā)布"peerDependencies": {"@angular/common":"^8.1.3","@angular/core":"^8.1.3"}}
打包發(fā)布，如果沒有npm賬號需要登陸https://www.npmjs.com/注冊，并且第一次發(fā)布需要運行npm adduser，如果沒有在官網登錄還需要執(zhí)行npm login：
ng build components --prod
cd dist\components
npm adduser （第一次發(fā)布的情況）
npm login? （如果沒有到官網登錄）
npm publish
2.新建組件
ng generate component component-name --project components
比如新建hello-world組件，component-name 替換為hello-world即可，
ll-components.module.ts在exports中添加對應的組件，供外部模塊使用
組件結構：
3.使用組件
在項目所在目錄的命令行中運行：
npm install ll-components
在需要的module.ts中導入并聲明：
import{ LlComponentsModule }from'll-components';imports: [..., LlComponentsModule],
在HTML模板中添加標簽，selector就是標簽名。
下面是出處，只是自己做收集，感謝作者
作者：李霖
鏈接：https://segmentfault.com/a/1190000022601892?utm_source=tag-newest
來源：SegmentFault 思否
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
