angular7 npm package assembly uploaded to the library, and references to the project

angular7 upload packages to the library npm

First, create a project and angular components

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]   //新添加的部分
})

Second, the installation ng-packagr

npm i ng-packagr --save

Third, the three files (the project name and the same level of the directory) under the new root directory

1.ng-package.json, as follows:

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

2.public_api.ts, as follows (Note: This document is derived encapsulation module.

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

3..npmignore, As follows

samples/
dist/
coverage/
node_modules/

Fourth, modify files 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

Fifth, packaging commands execute, execute (prompt in the root directory: project directory will be more than a dist folder

npm run packagr

Sixth, enterdist directoryExecution npm pack

npm pack

Seven return execution npm login command at the root directory and enter the account password and email

No account can go npm npm official website registered a very fast. (Logged in can ignore this step)

npm login

Eight, again enter cddist directoryNpm publish command execution

npm publish

There may be some small partner reported the following error

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

This is due to publish the name of the package is occupied people, just in package.json, the other into the name on it, it's best used elsewhere have modified the name of.

There is also a need to verify the error is npm account mailbox, you only need to copy the path of error, to verify it.

Nine, released here is complete, if you need a newer version, you can follow the steps below to update

1. Direct package.json modified version to version.
2. Repeat the above five-step process six, eight npm re-uploaded to the library.

---

Install and use their own package released

First, create a project

Second, the installation package just released, install the name here is package.json in the name of the name, or view directly on the official website npm, such as hys-first-component

npm install hys-first-component

3. In the package incorporated 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 { }

Fourth, use component tags app.component.html which is the name of the component selector

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

The next execution npm run start to see results.