Fala galera do YouTube Meu nome é Christian willam e hoje a gente vai trocar uma ideia relacionado à escalabilidade de componentes né reutilização Então a gente vai falar sobre bibliotecas o mesmo componente angular sendo utilizado em diferentes aplicações angular tá bom dentro de projetos diferentes aí mesma coisa como se a gente fosse criar imagina o material É uma do angular que tu consegue utilizar ela em vários projetos aí que tu quiser só dar um npm e trabalhar com ele dessa forma Beleza então para você que não me conhece meu nome é Cristian William Microsoft MVP
gosto de falar sobre angular e dnet aqui no canal e já vou pedir uma contribuição para você aí se inscrever no canal deixa um like deixa um comentario Zinho do engajamento que ajuda muito a gente aqui no processo de criação tá já que todo esse processo é de graça e bora pra aula então bora pra aula tranquilo vou ficar acho que vou ficar nesse canto aqui hoje O OBS deu uma desconfigurada gente então pode ser que eu me perca algumas fitas aqui eu tentei ajustar o som dele tava dando umas estourada Aguenta aí pera aí
primeiro passo mano como que a gente reutiliza um componente de um projeto pro outro no angular tu precisa tem duas maneiras de fazer isso primeira coisa a gente vai ter que querendo ou não lidar com a questões de biblioteca no angular a biblioteca é responsável por isso não componentes Apenas quando eu falo componente eu digo de qualquer coisa do angular um componente uma diretiva uma service uma lógica que tu quer que todo mundo daquele ecossistema que todo mundo da sua empresa por exemplo utilize Essa é a forma correta de fazer isso e com isso você
tem o mesmo código né No mesmo lugar ali todo mundo utilizando aquele mesmo código de uma forma inteligente coisa que uma biblioteca npm tá inus o que a gente vai aprender a fazer aqui hoje é uma biblioteca npm a gente só não vai publicar ela vou deixar isso outros vídeos tá mas você vai aprender a criar e conversar ela trabalhar ela em tempo real com sua aplicação padrão aqui tá bomin legal aí você n entrevistas su da vida tá beleza gente primeira coisa para criar uma biblioteca no angler a gente tem que utilizar um comando
vamos lá abrir um terminal Aqui estamos para criar uma biblioteca no angler a gente vai precisar usar um comandinho chamado ngg a biblioteca ela entra em Library tá ela entra no no NG esse G aqui para que todo mundo que já conhece é um generate né basicamente é isso então eu posso gerar uma Library aqui uma biblioteca e colocar um nome aqui por exemplo sei lá e Lib comp componentes beleza uma biblioteca de componentes você dá o nome que tu quiser aí lógico só que para você utilizar o comando NG generate no angular tu precisa
est dentro de um workspace do angular dentro de um projeto angular criado Então quando você utiliza um NG generate component já tá gerado uma aplicação angular ali dentro então a sucia lá e sabe que tem um angular deção lá dentro e sabe como que aquilo vai funcionar agora quando você tenta executar num lugar que não existe por exemplo assim ele já vai dar erro tanto que eu tô tentando criar uma passa já com isso aqui como que a gente contorna essa situação Qual que é o processo de desenvolvimento Então Cris processo de desenvolvimento vai ser
simples você vai executar primeiro um ngil Vamos dar um nome para esse cara aqui que vai ser sei lá Lib aula tutorial por exemplo beleza ã E aí cara tu vai passar o Trasto Create application igual a falso ele vai criar somente um workspace tá ligado e aí assim a gente segue vamos ver criou instalando os pacotes e tudo mais e quanto instala os pacote deixa um like se inscreve aí comenta aí a volta do Neymar pro Santos Pô nem sou Santista mas eu tô animado com isso na moral gosto do futb quando joga né
tá aí Isso aqui então eu vou abrir isso aqui com o uma IDE pra gente trabalhar ele abriu na tela do lado Pera aí eu só voltar aqui o meu OBS aqui e não perder o fio da minada aqui beleza fechar as parada aqui porque isso aqui foi tudo um teste que eu tava fazendo que deu merda é esse aqui também Ah bom vou dar um Open vamos lá documentos onde que eu guardei aulas aqui aqui e aqui estamos ó Ele abriu um do lado aqui de novo vou arrastar ele aqui gente pera aí aí
ó carregando aqui estamos você olha aqui uma biblioteca uma biblioteca não workspace quando ele é criado ele basicamente não tem nada dentro dele ele é só uma estrutura angular só que ele não tem nenhuma aplicação não tem nada dentro dele tanto que se eu abrir um pack de ponto deção por mais que ele tão NG server aqui ele não tem o que rodar legal e se a gente olhar o angular Jon você vê que ele tá tudo queimado quebrado aqui ó quer dizer el não tem nada em project aqui significa que tem nada e aí
ele tem essa nova pasta aqui que vai ser criada estando aqui dentro do do meu projeto Agora sim eu consigo gerar uma biblioteca Beleza então a gente vai utilizar o NG generate Library E aí eu vou dar um nome aqui para essa biblioteca Então vai ser Lib components legal para ficar tranquilo pra gente NG generate Library Lib components nota que quando o angular ele tem um workspace é muito mais fácil de gerenciar então por exemplo se você quiser dentro do mesmo workspace trabalhar com a sua aplicação angular com a sua aplicação biblioteca tudo do angular
é muito mais fácil de trabalhar porém aí você teria que ter um monorepo seria o caso de ter somente esse esse carinha aqui ó deixa eu atualizar aqui porque o a ide ela quando adiciono uma pasta por fora dela igual a gente fez aqui ela fica meio meio meio lerda para para pegar então o que eu tava falando é dentro da pasta projects aqui agora a gente vai ter a Lib components eu posso ter uma aplicação aqui também tudo dentro desse workspace que foi criado seria trabalhar com monor repo que seria um repositório para pasta
de componente o mesmo repositório sendo usado paraa aplicação isso é muito fácil só que é um caminho que o mercado às vezes nem utiliza o mercado costuma separar a biblioteca num caminho separado num projeto separado e as aplicações também são em outros repositórios e aí é um pouquinho diferente de lidar com isso aqui eu tô falando isso eu acho que é interessante falar isso porque hoje mesmo no mercado a gente tem uma parada chamada NX né enex Cada um fala do jeito que convém aí enex de enex aqui achei que pô Pera aí que eu
tô achando a beira aqui velho esse esse recurso do Mac tá maravilhoso aí agora sim então a gente tem esse enex Smart repus aqui ó esse carinha aqui ó Smart mono repus se for trabalhar com essa ideia de ter o mesmo projeto trabalhando com o o componente tudo dentro do mesmo workspace do angular é muito mais fácil só que eu recomendaria você trabalhar com esse enex porque ele tem uma ideia um pouco mais inteligente de gestão desse tipo de conceito beleza Ainda mais quando se fala em teste e esse tipo de outras coisas aí tá
bom então aqui é a estrutura de uma biblioteca do angular brush para nós fazer umas escritura na tela aí amos aqui a gente tem ali o Lib components tem os architecture aqui e tal agora você pode ver que ele gerou um um projeto pra gente aqui né esse Lib components aqui ele não existia então é essa pastinha aqui que foi gerada pra gente deixa eu dar um um zoom aqui ah eu acho que o tamanho aqui até que não tá ruim não importante é aqui mas olha só eu tenho Lib component tenho a pasta src
aqui source mas notem que dentro do li compon eu não tenho node mods o node mods ele é compartilhado então o angular gerencia tudo isso para você tá coisas importantes que tu precisa saber a gente tem aqui o ngpc tá que pon Jon e tem esse cara aqui que é o entry file chamado Public api P typescript esse Public api é tudo o que quem for usar a sua biblioteca vai conseguir utilizar Então dentro desse arquivo já que a gente vai abrir ele toda vez que você criar um componente uma diretiva uma service é importante
que você lembre de adicionar dentro desse arquivo expondo esse componente essa diretiva essa service tá ligado você não precisa expor por exemplo a parte de teste do seu componente porque o teste vai rodar Vai publicar a sua biblioteca e quem for utilizar tá pouco se com rodar os testes que existe dentro da biblioteca sua beleza o packed ponto Jon ele é o mesmo conceito só que ele tem esse peer dependen aqui é responsável por utilizar as dependências do projeto original aqui tá bom dentro de desse pack de ponto de som aqui senão ele deu um
problema de dependências duplicadas que é um dos problemas que acontece quando você não trabalha com monor repo E aí hoje a gente vai aprender a como lidar com isso aqui também fechou dentro do package pon json Eu tenho esse version aqui é a versão da sua biblioteca inclusive aqui dentro é importante que quando você começa a trabalhar com biblioteca você entender um pouco dessa sintaxe div versionamento aqui tá de ah de pacotes npm ou de qualquer tipo de pacote de biblioteca que exista na internet né Tem uma diferença aqui entre o último se eu não
me engano é pef esse aqui é Minor e esse aqui é major e cada númerointeiro ó 19 quando ele tem algum fixin alguma coisinha esse cara aqui e quando é alguma coisa que não interessa a gente é isso aqui pode crer então é um pouco disso legal o ridm aqui é importante você tá trabalhando aqui também ele tem algumas coisas aqui o ridm de biblioteca é um pouquinho diferente ó é aqui o best não sei o que e tal abrir ele dessa forma aqui é mais fácil pra gente ler o building e tal e aí
tem o TS config aqui também padrãozinho que vocês já estão acostumado Então olha só a Public api que eu comentei com vocês ela tem esse carinha aqui como que esse carinha funciona ele ele basicamente é a porta de entrada pra sua api todos os é componentes tudo que os módulos Se você ainda tiver trabalhando com módulos todos os componentes módulos que você utiliza eh vai ser vai tem que tem que existir aqui dentro tá Senão quem for utilizar não vai conseguir fazer o Import from o nome da sua biblioteca que no caso a nossa é
Lib components ele já vem com dois carin aqui ele vem com esse componente aqui que basicamente é um sei lá um parágrafo nada a ver aqui tem prefixo também então essa configuração de prefixo consegue ajustar aqui ó dentro do project aí você tem o o prefixo Lib aqui se for o caso tu consegue e ajustar também mas vamos lá eu vou apagar esse componente aqui pra gente fazer um componente novo tá só pra gente acompanhar do zero New file vou gerar um componente padrão aqui vai ser o buton pon component ponto typescript tá perguntando se
eu quero adicionar o Git vou adicionar que eu tô fazendo aqui gente indifere se é no no webstorm se é no vest code não tô usando extensão nenhuma tô fazendo tudo através de linha de comando não fica susta Vamos que vamos vamos de boas tá ó esse componente aqui para não atrasar lado nosso porque a ideia hoje não é falar sobre criação de componente e sim sobre reutilização de componente e em vários projetos Eu já copiei ele aqui ó ele tá bem feio inclusive mas a ideia aqui é passar para vocês e um pouco da
reutilização desse componente Então olha só ele é um buton sabe bem feião botãozinho feio para burro aqui e aí eu tenho o host display Block e essa cor de fundo aqui azul e a cor das escritas é branco ele tem uma uma eh uma um input só que seria essa Label aqui tá bom bem bem bem de boa bem simples não mesmo Cris para mim expor esse componente Como que eu faço esse componente na versão que eu tô utilizando do angler muito importante falar isso a versão 19 se eu não me engano aqui cara versão
19 na versão 19 o padrão do ângul era standalone components então por mais que a gente não tá vendo o standalone igual a true aqui significa que o padrão o Def já é o standalone igual a true se não fosse Stalone eu ia ter que setar aqui standalone igual a fals beleza então vamos já associar esse conceito novo do angular aí esse padrão Eu também gosto mas se você tiver na versão 17 16 por exemplo Tu teria que tá o standalone true aqui na frente Beleza não tem nenhum problema também Outro ponto que eu quero
falar é que as configurações que você vai aprender aqui hoje quando a gente não tiver falando mais de monor repositórios ela não se aplica em versões mais antigas do angular por exemplo na versão 16 que não utiliza o builder White que é um builder novo do angular muito melhor do que o antigo que eu esqueci o nome não sei se era o s build não sei o qu mas a gente consegue sacar aqui por exemplo no angular.js olha aqui ó esse builder aqui ó angular Dev kit builder angular build angler aqui é diferente do antigo
16 tá ligado Então as o que eu vou falar aqui provavelmente não se aplica na versão 16 para baixo é um ponto importante E a versão 16 já tá antiga inclusive tá deixando de ser LTS interessante aí que vocês atualize também para para novos isso cara inclusive é um ponto que tem muita vont vantagem em atualizar essa versão 16 principalmente a partir de sign essas fitas tanto que eu tô usando aqui já ó aqui é um input signal e tal tá bom Cris tu fez o bagulho aqui para mim enxergar o negócio então tu tem
que vir aqui e exportar ele Senão quem for utilizar sua Lib não consegue fazer isso então Lib barra aqui ó eu só vou expor esse cara aqui tá Lib componente isso mesmo kot find mod Ah mano porque o negócio não é só isso aqui Lib component Button fo isso aqui mesmo cara por que que ele tá dando zica Ah porque é ponto barra mano agora sim faz sentido tá aí ó então eu vou exportando aqui tudo que eu quero que é que seja visível né para quem for utilizar esse componente novo legal E aí esse
componente pode ter teste pode ter o que você quiser aqui também beleza estando no mesmo lugar olha só a Lib tá aqui eu não consigo rodar uma Lib não existe fazer um npm start aqui vai dar nada ó vou vir aqui npm start não existe rodar uma alib ó não existe não não faz sentido npm Por exemplo eu posso dar um LG serve e vou tentar rodar Lib components não não não existe porque não é um projeto isso aqui tá ligado não é uma aplicação é um projeto Desculpa então eu posso gerar outro projeto aqui
dentro e trabalhar nesse outro projeto que é uma situação não tão usual de trabalhar com libs porque aí você teria um monorepo dentro do da sua empresa e todo mundo teria que tá dentro desse mesmo repositório às vezes é um pouco complexo trabalhar com monor repos quando você não tem o NX porque aí Pô mano tá todo mundo comentando no mesmo lugar mais conflitos esse tipo de coisa aí deixa a ser um pouco mais complexo Essa gestão muita gente às vezes prefere trabalhar com micr frontends ou outras estratégias a diferente de monorepo principalmente por causa
dessa gestão de time tá mas vamos lá vamos vamos adicionar uma nova aplicação como eu já tô dentro de um projeto de um workspace eu não dou um NG New aqui angular é não do NG New aqui eu já existo já já tô dentro do workspace já estando aqui dentro do workspace NG add application não opa NG generate application E aí a gente vai dar um nome de angular app então o NG generate vai gerar alguma coisa dentro desse workspace vamos lá tá vendo mesma coisinha que a gente tá acostumado tá rodando E aí ele
vai gerar uma aplicação pra gente aqui estamos notem foi bem rápido por quê porque tanto deixa eu atualizar aqui senão o ID Hello frisk ó lá ó tanto esse carinha aqui ó o angular app quanto o Lib compon tá fazendo Tá compartilhando o mesmo node mods então o angular tá gerenciando isso pra gente se eu abrir por exemplo src app app component ponto HTML que é esse carinha aqui ó tem toda aquela situação do angular lá ó vou até rodar essa parada aqui antes de de mostrar PR vocês ó NG serve angular app PR ele
rodar tem que especificar porque tem dois projetos dentro da pasta aqui tá aí 4200 rodou tá aí ó projeto angular igual a gente já tá até acostumado beleza só que a questão gente Eu até vou vou lá nos Style fazer aquele esquema lá que eu sempre faço sen não dói meu Zi ainda mais de noite ainda is é tá aí trabalhando inclusive com aquela parada do hot Reload né Né o Watch lá tá funcionando numa boa o npm start tá funcionando numa boa Legal fizemos isso agora eu quero usar esse buton dentro o botão da
biblioteca dentro do projeto que eu acabei de criar aqui como que eu faço isso como está tudo dentro do mesmo workspace aí é fácil né vou vir aqui inclusive ó vou apagar o que tiver aqui no no HTML do angular E olha que interessante cara um ponto que eu queria mostrar para vocês vou até aproveitar essa deixa o npm start agora ele diz quais são os importes dentro do seu componente que não estão sendo utilizados no caso por exemplo pelo template porque o template aqui tava utilizando o router outlet e esse aqui é um recurso
novo que chegou então eu acho legal essas novas alterações para tá atualizando o angular em si Legal vamos apagar esse cara aqui vamos apagar esse aqui porque Como o próprio angular já disse não tá usando e quando eu dou um cont control S ele para de chorar em relação a isso ó salvar aqui salvar aqui e aqui estamos tá aplicação tá preta aqui tá certo Vamos lá para mim utilizar um componente standalone qual que era o esquema é importar O componente direto aqui buton component olha o jeito que ele importou aqui em cima aqui ó
isso aqui não tá certo você não tá importando ele de uma forma correta por ele ser uma biblioteca tu pode fazer o Import PR li components É isso mesmo de erro aqui no bagulho mod uai uai tava esperando que isso desse certo pô cas de Lib comp é um projeto Eu tô achando que ele tá achando que isso aqui pera aí vamos lá eu vou utilizar aqui o buton component vou tentar utilizar Ele diretamente igual o próprio importação sugeriu vamos P ver se vai rodar Imagino que não vai rodar All imports are unused Mas vamos
lá Se bem que tá dentro do workspace né aí é mais fácil pegar o botão ele tem uma propriedade chamada Label Ah vai funcionar sim só dele já ter reconhecido aqui ele já vai funcionar então aí ó componente updated S client Vamos abrir aqui o nosso carinho tá aí Cris é o nome da biblioteca posso mudar aqui por exemplo deixa o like mudei deixa o like perfeito e se eu vi aqui no button.on component e alterar alguma propriedade daqui por exemplo background para Red ele automaticamente já já mostra que sofreu essa alteração tudo bem isso
Funciona Isso é uma gestão de biblioteca tá porém gente tem uma questão a biblioteca e em desenvolvimento Inclusive a gente nem usa ela assim deixa eu fazer um um teste aqui ó eu vou buildar a biblioteca e vou tentar utilizar elaa buildada para ver o que que acontece Então vamos parar vamos lá no na Lib seria CD projects né tá dentro de projects Lib components Lib components aqui estamos nós vou dar um NG build e ele vai buildar a Lib pra gente tá aí ó i IV e tal build foi lá e budou e deixou
o resultado pra gente de disp aqui Lib component Deixa eu ver se eu consigo melhorar essa importação a partir de lá agora e não vai rolar B start por causa de ser tudo no meio por mais que é mais fácil Opa CD pon pon barra Lib aula tutorial isso mesmo NG serve angular app Ah agora foi ó tanto que até já parou de dar erro aqui tá aí ó tá funcionando do mesmo jeito vou dar um F5 funcionou se eu venho aqui agora e mudo alguma coisa do buton vamos testar vamos voltar para Green sei
lá qual que tava ele não refletiu porque agora o angular tá pegando a biblioteca mesmo em si não o arquivo do angular em si então a biblioteca ela fica dentro do dist aqui por padrão ele vai jogar aqui dentro do dis aqui em cima deixa eu load from Disk aqui tá aí ó tem um dis aqui em cima Lib compon ele tá pegando daqui então eu teria que buildar de novo por exemplo a biblioteca vou fazer um NG build Lib components por exemplo começou a buildar legal agora que ele Build de novo ó eu vou
e rodo o projeto de novo olha olha que servicinho servicinho mais mais malandro npm start e ele vai iar numa boa cadê tá aí ó agora ficou verde mesma coisa que a gente alterou ou tu pode usar um watch aqui também fazer um NG build traz traço watch como eu tô na raiz do workspace Ó Lib aula tutorial eu tô especificando Qual que é o nome do projeto esse nome do projeto aqui é o que tá lá em projects ou o próprio nome da pasta né que acaba sendo o mesmo então vamos testar com watch
aqui agora que ele vai ficar olhando se eu já fiz alteração no arquivo então por exemplo eu vou vir aqui agora na opa vou vir aqui no meu app.com por exemplo quer dizer no meu buton comp tá aqui e vou deixar o fundo dele Black agora salvar quando eu salvo automaticamente ele já reflete a alteração aqui e aqui ele não reflete engraçado achei que i Achei que ia rolar Achei que ia rolar confesso PR vocês deu um cont control a cont control S de novo aqui teria que rolar de novo né servicinho de cor Achei
que ia rolar para ser sincero mas tá aí tá preto legal é fácil de gerenciar bibliotecas quando você trabalha com tudo no mesmo repositório só que isso não é o que acontece na vida real na vida real a biblioteca é um repositório igual esse workspace aqui então a biblioteca vai est dentro workspace só para ela costuma se é assim tô falando que é uma lei E aí esse angular por exemplo ele não taria aqui dentro mano não taria aqui dentro deleta ele vamos lá em angular Jon que eu devo ter quebrado uns bagul lá agora
aqui ó deleta esse cara entendeu Vou pausar tudo aqui Clear e aqui que ele tá olhando os bagulhos vou pausar também beleza na vida real não funciona desse jeito como que funciona então na vida real tu tem um projeto separado vamos voltar aqui no Finder tá vendo ó Eu tenho aqui o Lib aula tutorial que seria um repositório né É isso mesmo é isso mesmo e agora eu vou gerar uma nova pasta aqui através do próprio comando Nil abrir o terminal aqui ó aqui embaixo eh novo terminal E aí sim Finalmente eu vou ter um
n New aqui que seria a minha aplicação angular app tá vai serem scss não deixar rodando aqui então ele vai ter uma um repositório só pra sua aplicação e um repositório só pra sua biblioteca tá aí a gente vai aprender como que faz os dois conversar para você tá desenvolvendo localmente essa biblioteca aí sem sem dor de cabeça Demorou carregando o bagulho deixa o like Enquanto carrega aí deixa um comentario Zinho isso é porque ele vai tá instalando também o as paradas do npm tá aí ó então agora cada um é um repositório ó esse
aqui é um repositório e esse aqui é um repositório vou até abrir o esse outro aqui aqui agora então tá em documentos aulas esse cara angular app vou abrir ele então aí esse é o repositório do angler Se eu vir aqui e rodar ele por exemplo Ah ele tem um npm aqui em cima se eu não me engano tem aí npm start padrão tá vendo o 4200 tá funcionando e esse antigo aqui é o mesmo inclusive tá tudo na 4200 legal primeira coisa que a gente sempre faz aqui é ir lá no Styles do projeto
né que eu prefiro deixar assim color skim Dark legal tudo preto beleza vamos Apagar o arquivo aqui agora o HTML do projeto gente já viu que tá funcionando tá quando eu apago o HTML ele já começou a avisar para mim que esse Import não tá sendo mais utilizado vamos Apagar também esse carinha aqui e como Cris que eu faço para utilizar o componente desse outro projeto aqui da Lib aula tutorial dentro do projeto do angular app dentro do meu projeto o que a gente vai fazer é o seguinte a gente vai usar uma parada chamada
de npm link tá ligado o npm link ele cria um link entre a o o Build do seu projeto Ou seja a sua pasta dist aqui ele vai criar um link entre isso aqui e o seu projeto então não necessariamente ele vai instalar alguma coisa no package pon json só que esse código vai existir dentro do node moduls tipo é isso seria basicamente essa a ideia Então como que funciona isso eu vou mostrar para vocês que o meu package pon Jon não tem a biblioteca ainda porque o package pon json ele referencia de duas formas
Tem como tu referenciar o nome da biblioteca aqui ou por exemplo tem como eu ter uma biblioteca aqui por exemplo sei lá vou dar vou dar dar um exemplo bem nada a ver aqui tem como eu ter uma biblioteca aqui por exemplo chamada Cristian colocar um file aqui e fazer uma referência dela também funcionaria se eu não me engano não tô muito certo em relação à sintaxe mas dá para fazer essa referência local só que quando você utiliza o npm link ele não vai criar nada nesse lugar aqui então vamos utilizar o npm link primeira
coisa tem que criar o link Então a gente vai lá na pasta Lib aula tutorial vamos buildar o projeto aqui vamos criar um vou criar aqui no caso um n de eu só ver se existe a pasta aqui ainda existe então tá no dist aqui vou dar um Reload FR Disk só para garantir então legal eu tenho que dentro dessa pasta dist aqui tá vamos lá dentro CD projects não não tão em projects é CD dis direto aí e aí a gente vai mais ainda dentro da pasta Lib components agora eu tô exatamente aqui dentro
dessa pasta aqui ó dentro da Lib components beleza e aqui dentro eu vou invocar um npm link tá legal ele já já funcionou já adicionou só que é interessante a gente tá trabalhando com o build watch aqui que é a questão que toda hora que eu alterar alguma coisa na biblioteca ele automaticamente Vai avisar o npm que alterou E aí a aplicação que tá consumindo essa Biblioteca Virtual nossa ainda vai responder e vai fazer a atualização em tempo real né o hot Reload lá então vamos já programar o NG Build para Rod aqui nesse caso
então NG build eu tô na raiz do projeto ó se eu for até o projeto é mais fácil Vamos até o projeto Lib tô até o projeto aqui agora e dentro do projeto eu dou um NG build tra traço watch Fechou buildando tá aí from e to tá começando a mostrar E esperando por alguma atualização de arquivo legal Enquanto isso o nosso npm link já foi criado aqui agora a gente vai lá no nosso projeto antes de ir no nosso projeto quer dizer vamos só pegar o nome nome da biblioteca aqui para não tiver não
ter erro de digitação então a biblioteca ela chama chama Lib aula não ela tá em ângulo tô olhando no lugar errado Lib components aqui ó esse é o nome da biblioteca tanto que se eu venho aqui ó e dou um npm LS traço traço link tem um erro doido aqui doido no ctif pera aí pera aí deixa eu vamos terminar o link depois eu eu mostro o npm LS para vocês mas vamos lá vamos lá de boa muda o projeto vem aqui no angular app na raiz do projeto mesmo vou parar ele aqui Inclusive abrir
um terminal padrão aqui e a gente vai fazer npm link e passar o nome da biblioteca Nossa que é Lib component tá vendo ó ele demorou um tempo e aí ele adicionou o pacote aqui apareceu adicionado One package aqui agora sim a gente faz um npm LS TR link tá aí ó nota que ele agora criou um link você consegue ler o link aqui entre uma um projeto e o outro projeto se apareceu isso aqui significa que já deu certo o seu npm link beleza basicamente é isso como que funciona agora que já existe o
npm link dentro do projeto nosso notem também outra coisa que eu acho que é importante que aqui no dependen não existe nada em relação a dependência de um projeto e outro tá então não não não existe não precisa existir dentro do isso inclusive às vezes é melhor que não exista mesmo para não ter duplicações e tal tá perfeito Vamos tentar utilizar esse componente agora então ele chama buton component começa meio bugadão ó ele é difícil eu vou fazer o Import manual Import from Lib component Lib components É isso mesmo e aí a parada chama buton
comp Ah ele até tá sugerindo aqui achei que ele ia ser pior vamos entrar aqui agora no HTML e vamos tentar usar o Lib buton ele tem uma Label se eu não me engano Cris por exemplo salve aí e vou dar o npm start você vê que o a ide ela tem um pouco de dificuldade para entender que você tá utilizando de outro lugar mas você vê que budou não deu problema no build então já é um excelente final é um excelente sinal aí legal feito isso a gente vai tentar rodar o projeto e aí
você vê que ficou preto e não veio nada quando eu dou um f12 vocês vão ver um monte de problema principalmente porque eu eu tô usando signals aqui dentro do buton component por exemplo e tal por quê Porque o angular ele tem um nessa depois da versão 16 ele tem a versão 17 18 19 até até o vídeo atual aqui ele utiliza o White é White mesmo cara acho que eu tô falando merda mano Ive V não sei ele utiliza outro builder e esse outro builder às vezes ele tenta usar a injeção de dependência ou
angular tá tentando pegar um um componente que tem injeção de dependência antes do contexto de injeção de dependência em si tiver funcionando então a gente tem que dizer pro angular ignorar Cara isso aqui é um é um é um pulo do gato que cara demorou para mim achar essa tá ligado Porque nas versões antigas do angular você não precisa fazer isso na versão 16 para trás Teoricamente isso já estaria funcionando eu não tenho certeza para falar isso para vocês porque eu até já testei isso e algumas vezes deu pau o npm link só que eu
não sei se é o Projeto ou se é a versão mas nas versões da frente esse problema que vai acontecer com NG 0203 ou o que tiver que acontecer aqui você vem aqui no angular Jon do projeto que vai consumir a sua biblioteca tá angular app dentro de architect tu tem o builder aqui e tu tem o op tá ligado a gente ao invés do Build a gente vai lá no Serve que é o responsável por rodar o seu projeto local tanto que para rodar o projeto local NG serve também funciona ao invés de npm
start vamos adicionar algumas opções aqui cara ver se eu não tô na frente não tô options então aí a gente vai ter o build target que vai ser o NG build Tá além disso aqui o prle que é antes de gerar o bund na h rodar isso aqui a gente vai excluir a nossa biblioteca daqui que chama vou põ aspa dupla né Lib componentes legal esse é o nome da nossa biblioteca salvei o angular Jon vou parar e vou rodar tudo de novo npm start tá bom budô tá aí tá rodando de novo agora o
nosso componente finalmente apareceu Vamos fazer um teste de hot Reload eu tô dentro do meu projeto aqui então isso aqui que a gente a gente tá vendo ó Isso aqui é o projeto do angular app agora eu vou pro projeto da biblioteca e eu vou alterar alguma coisa no botão olha notando que aqui tá já ele tá rodando um NG build junto dentro da pasta aqui tá bom vamos lá eu vou mudar de black aqui para tá Black hoje tá Black então eu vou mudar para Red Por exemplo quando eu salvo ele automaticamente já faz
uma build Olha isso já ficou vermelho significa o que ele automaticamente já fez uma Build automaticamente essa nova build já veio parar aqui e automaticamente a aplicação angular que tá consumindo essa Lib tá funcionando ele já entendeu esse Hot Reload dessa forma simples rapidão beleza feito isso tu vai lá desenvolve o seu código do jeito que você tem que fazer e publica ele em algum registre quando fala registre o que que é registre Cris registre é um lugaronde vai ficar todas as bibliotecas então por exemplo as empresas u um aure artifacts por exemplo tem um
registre da Azur ou por exemplo tem um npm quando você faz npm start desculpa npm Install e o nome de uma biblioteca ele vai no registre do npm baixa essa biblioteca quando você baixa uma biblioteca pro seu projeto gente nada mais que você tá fazendo é pegando esse dist aqui dela ó tô em qual tô no ângulo arep vou mudar pegando essa pasta dist isso aqui ó e colocando no angular Jon é basicamente essa a ideia tá ligado eu vir aqui ó eu não vou conseguir achar aqui Inclusive eu nem sei como que ele organiza
aqui não vale nem a pena eu gastar meu tempo aparecer alguma coisa diferente aqui até mas enfim ele vai criar esse link invisível quando você fazer isso terminei vai ser assim minha biblioteca tu vai vir aqui no Ah no package Jon dela alterar colocar a versão que você quer aqui 1.0 e subir ela para um npm ou pro qualquer registre aí que você tiver E aí o seu projeto tu vai poder fazer um npm nela e passar essa versão aqui que automaticamente ela já vai est funcionando aí no seu projeto do mesmo jeito que você
testou local beleza Só que tem um problema Cris fiz o link como que eu tiro o link agora da biblioteca minha você vai vir aqui no seu projeto ó tô aqui no angular app tá não tá rodando npm unlink eh qual que é o nome Lib components rodei e agora não existe mais esse link local quebrou o npm start por ele simplesmente não reconhece mais esse buton component ele não reconhece mais esse cara aqui beleza basicamente é isso deixa eu tentar fazer um Reload aqui nos arquivos Reload Alf Disk Achei que ele ia quebrar isess
aqui Ah quebrou finalmente Então tá aí o vs code nessas coisas é mais rápida para verificar as alterações que ocorreram aí através do terminal mas aí basicamente eu acho que a ideia de de componentes é isso dá para dá para usar desse jeito aqui bastante coisa né Só que eu acho que isso aqui ele acrescenta muito então por exemplo na onde eu trabalho é uma eu tenho vários micro frontends e todo mundo usa a mesma tipo o botão da empresa tem que ser o mesmo em qualquer lugar que for usar no sistema Então esse botão
ficaria na biblioteca e todo mundo consome esse buton basicamente Essa é a ideia beleza gente se você gostou da aula não se esquece de deixar seu like se inscrever no canal aí toda essa força que vocês já me dão deixa um comentário também aí um agradecimento me segue nas redes sociais estamo junto até a próxima valeu
