1.创建并修改项目

安装Angular命令行工具：

npm install -g @angular/cli

创建一个空应用, 前缀通常是公司、组织、姓名简称，ll这里是我姓名简称：

ng new ll-angular --create-application=false

初始化组件库, --prefix: 前缀, 在用命令行新建组件/指令时，selector的属性值的前缀:

cd ll-angular

ng generate library components --prefix ll 

创建测试应用, --minimal: 创建一个没有任何测试框架的简单项目：

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",// 每次更新组件后版本号都要提升再发布"peerDependencies": {"@angular/common":"^8.1.3","@angular/core":"^8.1.3"}}

打包发布，如果没有npm账号需要登陆https://www.npmjs.com/注册，并且第一次发布需要运行npm adduser，如果没有在官网登录还需要执行npm login：

ng build components --prod

cd dist\components

npm adduser （第一次发布的情况）

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 思否

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。