Criar uma Biblioteca Personalizada com Angular
Criar uma Biblioteca Personalizada
Para começar, você precisa primeiro criar um novo projeto usando o CLI.
>
Seremos todos bons neste ponto. A partir daqui, porém, precisamos usar um comando que o CLI fornece no Angular 6 ou superior, que é ng gerar. Este ng generate library é projetado para criar uma biblioteca compartilhada personalizada. Então, dando um nome à sua biblioteca, ela será adicionada a um projeto separado, que é chamado de workspace.
Quando você faz ng new você obtém um workspace com um projeto dentro dele, que é o seu projeto web. Esta geração ng irá adicionar uma segunda versão no espaço de trabalho para que possamos realmente testar nossa biblioteca na aplicação Angular sem publicar para npm ou qualquer outro recurso. Agora, isto modifica o arquivo tsconfig e que vai ser atualizado para que o projeto Angular, o separado no espaço de trabalho, entenda como chegar à biblioteca, a biblioteca compartilhada que vamos construir.
Então você pode construir sua biblioteca usando o comando ng build e então dar-lhe o nome do seu projeto, assim:
Você pode usar isto e testá-lo diretamente no outro projeto Angular que está dentro do seu espaço de trabalho. Assim, torna realmente fácil fazer isto sem ter que publicar em npm em algum lugar. Depois disso, queremos publicar para o npm quando estivermos prontos para ir, já o testámos e parece bom, porque queremos ser capazes de puxar para dentro do npm, quer seja o npm que anda por aí que qualquer um pode chegar, ou se for um npm interno que você possa ter na sua empresa. Nós queremos puxar desses para as nossas diferentes aplicações para que possamos obter reutilização. Há um link se você é novo a contribuir com npm que está lá fora.
Precisamos fazer isso para ir para a pasta dist e haverá um arquivo package.json incluído. Isso vai ser usado para depois publicar até npm. Só precisamos escrever o seguinte comando:
Então, devemos ver como as coisas são diferentes na nossa solução? Vamos ☺.
>
Então, antes de mais nada, você vai notar que temos uma pasta de projetos. Agora também temos uma tsconfig atualizada, como você pode ver na seguinte imagem:
>
Adicionou os caminhos para onde finalmente vamos construir nossa pasta dist depois de fazer uma construção e é por isso que você tem que construir primeiro, antes de poder fazer isso, porque o TypeScript vai realmente olhar para isso para ser capaz de fazer tudo isso funcionar.
Agora, a outra grande coisa que foi feita é o nosso arquivo angular.json tem um novo projeto nele:
Então, temos um projeto secundário aqui mesmo, que é o nosso braga-lib e você vai notar o caminho lá para a raiz do projeto. Agora, todo o resto necessário para construir e testar está incluído. Portanto, essas são as principais coisas que ele modifica. Agora, o que podemos fazer a partir daqui é fazer mudanças na nossa biblioteca. Então, se entrarmos, você verá arquivos normais aqui e uma pasta src e então o que eles adicionam é uma lib como você pode ver:
A lib vai ter nosso componente, nosso módulo e até mesmo um serviço, se você quiser. Se você abrir o arquivo do componente, ele praticamente só diz “braga-lib funciona”.
Agora note o seletor “lib-braga-lib”. Você pode mudar isso, mas agora mesmo vamos deixá-lo como está e vamos usá-lo em nosso projeto Angular. Vamos dar uma olhada nisso? Ah, sim ☺