Angular组件开发及NPM发布

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.测试组件

在测试应用的app.module.ts中引入组件模块（只做一次）

import { LlComponentsModule } from '../../../components/src/public-api';

在app.component.ts的模板中添加对应组件：

运行：

ng serve

4.使用组件

在项目所在目录的命令行中运行：

npm install ll-components

在需要的module.ts中导入并声明：

import { LlComponentsModule } from 'll-components';

imports: [..., LlComponentsModule],

在HTML模板中添加标签，selector就是标签名。

<ll-hello-world></ll-hello-world>