[PT-BR] Criando sua biblioteca com Angular 9+

Olaar! Será que vocês já estiveram na seguinte situação que vou descrever abaixo? Se sim, espero que esse artigo possa te ajudar a fazer sua própria biblioteca e fazer com que você consiga evitar a reescrita de código. Se não, espero que o artigo ainda lhe acrescente algo :)

Disclaimer

Nesse artigo não demonstrarei como publicar a biblioteca em algum repositório. Também não desenvolverei módulos ou componentes na biblioteca.
Considero que você esteja utilizando o Angular 9 (ou alguma versão superior) e que você tenha conhecimento básico sobre o framework Angular.

Situação

Tenho mais de um projeto Angular que precisa utilizar um mesmo componente/uma mesma funcionalidade/um mesmo estilo.

Soluções

Para solucionar essa questão, uma opção seria reescrever o código necessário nos meus diferentes projetos. Uma alternativa bem prática mas que, em algum momento, se eu precisasse fazer alguma alteração nesse código comum entre os projetos, eu precisaria fazer em todos os projetos. 😥

Outra opção seria escrever esse mesmo código, que é necessário nos diferentes projetos, em um formato de biblioteca. Dessa forma, eu e outras pessoas poderíamos utilizar a mesma solução em vários projetos com apenas um código implementado.

Nesse artigo, eu pretendo explicar como que podemos resolver essa questão a partir da segunda solução mencionada acima.

Criando sua biblioteca Angular

Angular CLI

Para dar início à implementação da biblioteca, certifique-se que você possui CLI do Angular instalado na sua máquina. Você pode verificar se possui o CLI instalado ao executar o seguinte comando:

$ ng --version

Se caso você possuir o CLI do Angular instalado na sua máquina, você deverá ver informações como a versão do CLI do Angular e os pacotes do Angular que estão instalados na sua máquina com suas respectivas versões.

Se caso você não possuir o CLI ainda, basta executar o seguinte comando:

$ npm install -g @angular/cli

Caso esteja usando Linux ou Mac, você pode precisar do sudo:

$ sudo npm install -g @angular/cli

Criando a estrutura Angular

Agora é a hora em que, de fato, colocaremos a mão na massa! 👨‍💻👩‍💻
Execute o seguinte comando (explicarei logo abaixo sobre o comando, seu argumento e sua flag):

$ ng new <nome-da-estrutura> --create-application=false

A execução desse comando pode demorar alguns segundos/minutos (dependendo da velocidade da sua internet) para terminar de criar a estrutura.

ng new

O comando ng new é responsável por criar uma estrutura Angular. Com essa estrutura, podemos criar um ou mais projetos com o Angular. O argumento <nome-da-estrutura> definirá o nome do diretório que conterá a estrutura Angular e, também, definirá o nome do pacote que será gerado caso nós queiramos empacotar essa estrutura.

--create-application

Por padrão, quando executamos o comando ng new <nome-da-estrutura>, o CLI do Angular cria um diretório com uma estrutura que contém um projeto simples Angular. Porém, quando especificamos essa flag com o valor false, estamos dizendo ao CLI para criar somente a estrutura sem projeto algum.

Gerando biblioteca

Após ter criado a estrutura, entre no diretório que foi gerado pelo CLI e execute o seguinte comando:

$ ng generate library <nome-da-biblioteca>

Baseado na estrutura que criamos anteriormente, esse comando irá gerar uma pasta chamada projects que contém uma pasta com o mesmo nome que utilizamos como argumento do último comando (<nome-da-biblioteca>). Essa pasta contém todos os arquivos respectivos à nossa biblioteca!

Perceba também que no arquivo angular.json foi adicionado uma nova chave com as configurações relacionadas à sua biblioteca recém criada.

Buildando biblioteca

Para que consigamos compartilhar dessa biblioteca com outras aplicações, precisamos buildar essa biblioteca e transformá-la num arquivo que seja responsável pela instalação da biblioteca nas outras aplicações. Faremos isso executando, primeiramente o seguinte comando:

$ ng build <nome-da-biblioteca>

Para o nosso contexto, esse comando irá, basicamente, minificar e otimizar a nossa biblioteca. O comando gerará os arquivos otimizados da nossa biblioteca na pasta dist/<nome-da-biblioteca>.

Mesmo com esses arquivos, ainda precisamos de mais um passo para que possamos compartilhar a nossa biblioteca. Precisamos navegar até a pasta dist/<nome-da-biblioteca> e executar o seguinte comando:

$ npm pack

Esse comando irá empacotar todos os arquivos otimizados relacionados à nossa biblioteca e irá gerar um arquivo tarball. Esse arquivo terá o nome da nossa biblioteca junto com sua versão e, também, terá a extensão .tgz.

Pronto! Com esse arquivo, podemos facilmente utilizar a nossa biblioteca em outras aplicações.

Instalando biblioteca

Para instalar essa biblioteca, basta que tenhamos acesso a esse arquivo .tgz.

Para exemplificar, vamos navegar para fora dessa estrutura Angular que criamos e vamos executar o seguinte comando:

$ ng new <nome-da-aplicação>

Esse comando irá criar uma estrutura Angular com um projeto Angular já definido, como dito anteriormente.

Se caso quisermos utilizar a nossa biblioteca nesse projeto, basta navegarmos para dentro dessa nova estrutura que foi gerada e executarmos o seguinte comando:

$ npm install <caminho-para-o-arquivo-tarball>

Considerações finais

Com base em todos esses passos, você conseguirá criar sua própria biblioteca com Angular e também conseguirá instalá-la em outros projetos Angular.

Como dito no disclaimer, não contemplei como publicar a biblioteca em repositórios públicos/privados mas posso fazer isso em algum artigo futuro. :)

Para a escrita do artigo, utilizei a documentação do próprio Angular como apoio.

Finalizando, estou sempre aberto a sugestões, críticas e ideias! o/

Comments

[Geovana Silva]

Muito bom Léo :D

[Maria Gabriela Oliva]

muito bom, nota mil, tá arrasando <3

[Leonardo Santos]

Que bom que curtiu!!! Tenho tido ótimas inspirações!