angular7 NPMアセンブリライブラリにアップロードしたパッケージ、およびプロジェクトへの参照

ライブラリーNPMにangular7アップロードパッケージ

まず、プロジェクトや角度成分を作成します

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

第三に、新しいルートディレクトリの下の三つのファイル（プロジェクト名やディレクトリと同じレベル）

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パック

npm pack

ルートディレクトリにある七つのリターン実行NPM loginコマンドとアカウントのパスワードとメールアドレスを入力して

いいえ、アカウントはNPM行くことはできませんNPMの公式ウェブサイトは非常に高速登録しました。（ログインすると、この手順を無視することができます）

npm login

八、再びCDを入力します。distのディレクトリNPMは、コマンドの実行を公開します

npm publish

いくつかの小さなパートナーは、次のエラーが報告さがあるかもしれません

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

これは、最高の名前を変更した他の場所で使われて、その上に名前に他の、ちょうどpackage.jsonで、パッケージの名前が人々を占有されて公開することによるものです。

それを確認するために、エラーがNPMアカウントのメールボックス、あなただけのエラーのパスをコピーする必要がありますされていることを確認する必要もあります。

ここでのリリースナインは、新しいバージョンが必要な場合は、更新するには、以下の手順に従うことができ、完了です

1.直接package.jsonは、バージョンを変更しました。
2.上記の5段階のプロセス6を繰り返し、8つのNPMライブラリに再アップロードしました。

リリースされ、独自のパッケージをインストールして使用します

まず、プロジェクトを作成します

第二に、リリースされたばかりのインストールパッケージには、名前がここに名前の名前でpackage.jsonでインストールするか、など、公式サイトのNPM上で直接閲覧HYS-最初の成分

npm install hys-first-component

パッケージ組み込まapp.module.ts 3.

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コンポーネントタグを使用します

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

次の実行NPMの実行結果を見始めます。

横行市

出版元の記事・ウォンの賞賛2 ・ビュー35

プライベートの手紙の懸念