Publicando módulo Angular 4 no NPM

segunda-feira, 19 de fevereiro de 2018

Publicando módulo Angular 4 no NPM

O NPM serve para instalar, compartilhar e distribuir códigos. É um gerenciador de pacotes para JavaScript e também um repositório para compartilhamento de códigos fonte onde temos inúmeros pacotes de códigos reusáveis. Para quem trabalha com o Java, seria uma espécie de Maven para JavaScript.

O NPM é instalado juntamente com o Node.js, que pode ser baixado do seguinte endereço:

https://nodejs.org/en/

Após instalado você pode executar o seguinte comando para ver as versões do Node.js e do NPM respectivamente:

$ node -v

$ npm -v

Mesmo tendo baixado o NPM juntamente com o Node.js, eles são independentes e provavelmente você precisará atualizar sua versão do NPM, para isso use o comando npm install npm@latest -g.

Depois de instalado o NPM, é preciso criar uma conta caso você não tenha, ou fazer login para poder compartilhar seus pacotes. A criação da conta é bem simples e eles pedem um username, password e e-mail. É necessário a confirmação do e-mail antes de publicar algo caso a conta seja nova. O comando para criar uma conta é:

$ npm adduser

Ao criar a conta ele já loga no NPM. Para efetuar logins posteriores, os mesmos dados são pedidos, e o comando é:

$ npm login

Uma vez tendo usuário e senha e estando logado, devemos entrar no diretório do projeto que queremos compartilhar e prepará-lo para ser compartilhado. Para isso precisamos do ng-packgr. Essa biblioteca vai compilar nosso código para um formato de pacote do Angular. Digite o seguinte comando:

npm install ng-packagr --save-dev

Então crie um novo arquivo chamado ng-package.json na raiz do seu projeto. Insira o seguinte trecho de código nele:

{

"$schema": "./node_modules/ng-packagr/ng-package.schema.json",

"whitelistedNonPeerDependencies": ["."],
"lib": {

"entryFile": "index.ts"

}

A parte marcada de amarelo acima eu adicionei depois de tentar publicar uma atualização em um componente e me deparar com um erro do NPM não permitindo publicar pacotes com dependências, porém o componente não funcionava sem as dependências publicadas. Essa linha adiciona uma "lista branca" de dependências que podem ser publicadas, colocando o ponto (".") eu defini que todas as dependências podem ser publicadas.

Agora precisamos criar o arquivo que indicamos como arquivo de entrada no “entryFile”. Esse arquivo deve também estar na raiz do seu projeto e no conteúdo precisamos exportar nossos módulos como abaixo:

Export * from “./src/app/caminho_do_seu_modulo/seumodulo.module”

O módulo que for exportado será acessado por quem usar nossa biblioteca. Lembre-se de no decorator exportar os componentes, para que eles possam ser usados fora do módulo, como no exemplo abaixo:

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { FormsModule } from '@angular/forms';

import { SeuComponent } from './seu-component.component';

@NgModule({

imports: [

CommonModule,

FormsModule,

BrowserAnimationsModule

declarations: [SeuComponente],

exports: [

SeuComponente

]

})

export class SeuModule { }

Precisamos agora adicionar um novo script no package.json, atualizar a versão do seu projeto e remover a propriedade "private": true. Se você não atualizar a versão a cada vez que for publicar, não será possível uma nova publicação no NPM. Depois de remover a propriedade "private": true, dentro do arquivo procure a propriedade “scripts” e adicione ao final:

“packagr”: “ng-packagr -p ng-package.json”

Agora execute o comando npm run packagr, que irá gerar a dist da nossa biblioteca. Note que foi criada uma pasta dist. Ela é o conteúdo que deve ser publicado.

Por fim, execute os comandos npm pack para gerar um arquivo .tgz com a versão do nosso projeto e o comando: npm publish dist para que possamos publicar a nossa biblioteca no portal npm.

Segue o link de um componente que publiquei no NPM e o fonte no GitHub:

NPM: https://www.npmjs.com/package/p-calendar-ptbr

GitHub: https://github.com/GbDanielO/p-calendar-ptbr