paquetes de carga angular7 al MNP biblioteca
En primer lugar, crear un proyecto y componentes angulares
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] //新添加的部分
})
En segundo lugar, la instalación NG-packagr
npm i ng-packagr --save
En tercer lugar, los tres archivos (el nombre del proyecto y el mismo nivel de directorio) en el directorio raíz nuevo
1.ng-package.json, como sigue:
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts"
},
"whitelistedNonPeerDependencies": [
"."
]
}
2.public_api.ts, de la siguiente manera (Nota: Este documento se deriva módulo de encapsulación.
export * from './src/app/component/drop-down/drop-down.module';
3..npmignore, De la siguiente
samples/
dist/
coverage/
node_modules/
En cuarto lugar, los archivos de forzado 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
En quinto lugar, los comandos se ejecutan envases, ejecutar (símbolo en el directorio raíz: directorio del proyecto será más que una carpeta dist
npm run packagr
En sexto lugar, introducirdirectorio distpaquete de NPM ejecución
npm pack
la ejecución de retorno de comandos de inicio de sesión NPM siete en el directorio raíz e introduzca la contraseña de la cuenta de correo electrónico y
No se cuenta puede ir NPM NPM web oficial registró un muy rápido. (Ingresados pueden ignorar este paso)
npm login
Ocho, de nuevo entrar en cddirectorio distNPM publicar ejecución de comandos
npm publish
Puede haber algún socio pequeño reportó el siguiente error
You do not have permission to publish 'censorify'. Are you logged in as the correct user? : censorify
Esto se debe publicar el nombre del paquete de la gente está ocupada, por si package.json, el otro en el nombre en él, es mejor usarlo en otros lugares han modificado el nombre de.
También hay una necesidad de verificar el error se NPM buzón de la cuenta, sólo tiene que copiar el camino del error, para verificarlo.
Nueve, dado a conocer aquí es completa, si usted necesita una versión más reciente, puede seguir los siguientes pasos para la actualización
1. package.json directa modificó una versión a otra.
2. Repetir el proceso de seis por encima de cinco pasos, ocho NPM re-subido a la biblioteca.
Instalar y utilizar su propio paquete liberado
En primer lugar, crear un proyecto
En segundo lugar, el paquete de instalación acaba de publicar, instale el nombre aquí es package.json en el nombre del nombre, o ver directamente en el sitio web de la NGP oficial, tal como HYS-primera-componente
npm install hys-first-component
3. En los app.module.ts paquete incorporado
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 { }
En cuarto lugar, utilizan etiquetas de componentes app.component.html que es el nombre del selector de componente
<div style="width:200px;">
<app-test-drop-down [dropDownList]="test" (selectedListNames)="getSelectList($event)">
</app-test-drop-down>
</div>
La ejecución próxima carrera NPM empezar a ver los resultados.
