DEV Community 👩‍💻👨‍💻

Cover image for [PT-BR] Criando sua biblioteca com Angular 9+
Leonardo Santos
Leonardo Santos

Posted on • Updated on

[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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

$ sudo npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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/

Top comments (3)

Collapse
 
geovanasilva profile image
Geovana Silva

Muito bom Léo :D

Collapse
 
mariagcoliva profile image
Maria Gabriela Oliva

muito bom, nota mil, tá arrasando <3

Collapse
 
leonardossev profile image
Leonardo Santos Author

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

🌚 Life is too short to browse without dark mode