angular7封装组件上传到npm库，并引用到项目上

angular7上传包到npm库

一、创建angular项目和组件

ng new myFirstDemo //angular-cli新建项目
ng g m component //新建模块
ng g c component/drop-down //新建组件
//提示：必须在组件里的drop-down.module.ts声明和导出
@NgModule({
  imports: [
    CommonModule
  ],
   declarations: [DropDownComponent],
  exports: [DropDownComponent]   //新添加的部分
})

二、安装ng-packagr

npm i ng-packagr --save

三、根目录下新建3个文件（和项目名同级的目录）

1.ng-package.json，内容如下：

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

2.public_api.ts，内容如下（提示：此文件是导出封装的模块。

export * from './src/app/component/drop-down/drop-down.module';

3..npmignore，内容如下

samples/
dist/
coverage/
node_modules/

四、修改package.json文件

"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,                       //修改为false

五、执行打包命令，在根目录执行（提示：项目目录会多一个dist文件夹

npm run packagr

六、进入dist目录执行npm pack

npm pack

七、返回根目录下执行npm login命令并输入账号密码和邮箱

没有npm账号的可以去npm官网注册一个，非常快。（已登录的可忽略这步）

npm login

八、再次cd进入dist目录执行npm publish命令

npm publish

可能会有些小伙伴报如下错误

You do not have permission to publish 'censorify'. Are you logged in as the correct user? : censorify

这是由于发布包的名称被人占用了，只需要在package.json里，把name换成其他的就可以了，其他地方也用到这个name的也最好都修改。

还有一种报错是需要先验证npm账号的邮箱的，只需要复制报错的路径，去验证一下就可以了。

九、到这里发布就完成了，如果需要更新版本的话，可以按照下方步骤更新

1.直接到package.json修改version版本号。
2.重复上面五、六、八的步骤方法重新上传到npm库。

---

安装并使用自己发布的包

一、创建一个项目

二、安装刚刚发布的包，这里的install名称就是package.json里name的名称,或者直接在npm官网上查看，比如hys-first-component

npm install hys-first-component

三.在app.module.ts引入包

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
//引入的包 
import {DropDownComponentModule} from 'hys-first-component';               
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DropDownComponentModule  //引入的包
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

四、在app.component.html里面使用组件 标签则是组件的selector名称

<div style="width:200px;">
  <app-test-drop-down [dropDownList]="test" (selectedListNames)="getSelectList($event)">
  </app-test-drop-down>
</div>

接下来执行npm run start即可看到效果。