ANGULAR - ENTENDA STANDALONE APPS AGORA #angular #components #standalone

salve galera do YouTube Meu nome é Christian Will esse é o nosso canal de desenvolvimento e hoje a gente vai trocar uma ideia de angler a gente vai falar sobre stend Alone components e eu sei que esse já é um assunto até passado só que acontece que recentemente eu vi ali no repositório da da angular c l inclusive daqui a pouco até posso mostrar para vocês aqui que por padrão agora vai ser stendal long components então assim tem essa de não gosto de standalone prefiro modo Acabou acabou tem esses negócio mais não a ideia agora você tem que aprender a trabalhar com standalone components e na minha opinião Eu acredito que quando trabalhava com módulos para algumas pessoas adoravam outras testavam eu pelo menos eu gostava mas acaba que módulo sim transforma a aplicação numa complexidade maior Não começa no processo de aprendizado ali e isso pela porta de entrada do angler eu acho que podia ser até um problema então hoje por padrão não hoje na próxima versão aí hoje a gente tá na 16 Então se na hora que você tiver vendo esse vídeo já esver na 17 provavelmente você já vai estar utilizando Esse compones beleza antes de seguir vou fazer aqui a minha parte de chorar então gente me siga aí ó em todas as redes sociais aí LinkedIn Instagram Facebook tiktok YouTube principalmente deixe seu like no vídeo aí se inscreve no canal e vamos pro próximo então vamos lá vou cair aqui no botom right aqui tô na minha telinha aqui gente vou gerar uma aplicação do zero então atualmente atualmente velho vou gerar uma aplicação na onde vou gerar dentro de CD documentos curso projetos e agora cai aqui dentro tá bom gente vamos lá deixa eu subir o negócio aqui porque a minha tela é gigantona aí eu preciso ajeitar aqui para que para eu saber quando eu não tiver escrevendo fora da tela ó para gerar um projeto regular NG new aula standalone beleza porém atualmente traz traço standalone a gente precisa colocar esse traço traço standalone acontece que futuramente Quando a gente tiver na versão do angular 17 provavelmente não vai precisar disso vou mostrar para vocês como que faz para ver isso até bom que vocês fiqu antenados também vamos lá abre seu Google shome aqui tô Zando precisa ser o Google não seja o que você quiser aí dá um zoom né velho porque eu assisto bastante vídeo pelo celular então eu entendo da dor de vocês aí angler Hub tá aí tamb ó Ó entra aqui no github do Demorou vocês estão vendo aqui do lado aqui ó vocês vão descer aqui do lado aqui em releases ó tem um releases aqui do giub você pode clicar nessa última aqui não tem problema vai abrir a pasta de releases E vocês estão vendo que est na 1625 que é a última porém Gente o que o que vai ser lanç AD Cadê as outras excelente cliquei numa específica gente clicou em releases lá em cima lá igual eu fiz 152 10 14 e tal e aí o que tiver next aqui ó significa que é as próximas coisas aí que eles estão querendo inclusive ó pré relase aqui ó ele é marcado Como pre release aqui no nosso queridíssimo e aqui a gente descobre as coisas que tá chegando ó agora ser possível passar ssr no application schematics Tá ok ah schematics é quando você faz ngg GC o c de componentes é um schemer beleza Ah e aqui vamos achar em algum lugar aqui da onde que tá eu vi aqui esses dias essa cadê o bagulho 16 17 velho 17 mano ó agora você vai conseguir criar um novo um novo com ssr inclusive é um vídeo que eu tenho que fazer né cara hydration explicar o que que é isso e aqui tá o nosso querido aqui ó olha isso aqui gente olha isso aqui p uma setinhas aqui ó olha essa criança ó enable al by the full New applications significa que por padrão as aplicações vão iniciar dessa forma aqui ó como se eu tivesse passando esse Stalone aqui agora e isso implica em algumas mudanças no seu código Então Cris para mim utilizar Stalone vou pô Não Aqui porque o foco da aula não ensinar rota Então Cris para mim eh usar standalone comp points eu preciso começar uma aplicação do zero com standalone não você consegue migrar sua aplicação aos poucos para standalone beleza inclusive se eu não me engano o angular cli faz isso consegue te ajudar com isso mas eu vou explicar como que é o processo em paralelo Eu acho que eu vou gerar uma outra aplicação pra gente ir fazendo junto e comparando as parada hum bebam água vamos lá em paralelo ó enquanto ele gera esse aqui já gerou né vou dar um mais aqui CD documentos projetos NG G NG New aula [Música] standalone mods e eu não vou passar nada como na versão atual que eu tô do angler ele não é por padrão standalone ele vai gerar um projeto normal pra gente beleza e aí a gente vai abrir os dois projetos e a gente vai não ó tô rodar do mesmo jeito e aí a gente vai comparando como que era num E como que era no outro tá vamos que vamos então e já já foi não nem tempo de tomar minha aguinha de novo Tô com sede velho deve ser a ressaca vamos lá ó eu nessa pasta aqui eu vou dar um CD dentro de standalone modos opa Beleza tô aqui dentro agora vou dar o Code aqui code vou dar o enter legal então aqui a gente tem um esse carinha aberto aqui ó deixa eu ver se eu consigo coloquei beleza e aqui a gente vai dar um CD pon pon barra PR aula standalone legal Clear vou dar um code aqui dentro também vai abrir um outro fechar esse aqui e agora Teoricamente a gente tem dois projetos rodando aí o negócio pedindo para mim reiniciar o visual Studio aí a Qualquer Custo todo dia tem uma atualização do visual Studio não sei que que is apronta velho se tem gente que trabalha os Dev do visual Studio gente pegar esse cara aqui vou Minimizar esse aqui e Minimizar vai agrupar por negócio mas beleza vamos lá aqui a gente tá na nossa aula standalone primeira coisa os Stalone components eles não TM módulos Mas se você tiver migrando uma AP que tenha módulos e você Ah vou migrar PR standalone nesse caso você pode utilizar módulos sim então você pode ter uma aplicação que tem os dois tanto módulo quanto stand compon Beleza então a gente tem esse App config aqui ó que as configurações do nosso aplicativo e você vê que não tem o app mod igual a gente estava acostumado aqui ó não tem esse App mod aqui beleza gente tem o app config TS porém se eu olho no acho que é comand op aqui ó achei achei o menino Vamos abrir esse outro aqui agora paciência paciência que eu tô para gerenciar a janela eu sou uma bosta ó se a gente Olha numa aplicação que é criada sem standalone eu tenho esse App Model aqui que é na onde a gente configura toda a questão do sistema então eu tenho Bootstrap aqui app component numa aplicação normal e na aplicação standalone o Bootstrap nosso aqui não é aqui ele é no Main Olha só Bootstrap application ele passa o app component aqui beleza então vamos olhar aqui o nosso app component você começa a ver que todos os componentes Stalone isso não é só para component tá gente diretivas pode ser Stalone então sabe quando você precisa usar alguma coisa um módulo dentro do seu componente você vai adicionar ele no Import do próprio componente agora exatamente vamos pô esse projeto aqui para rodar npm start tá aí ó tá buildando o bagulho e o outro ó tô aqui no acho que é traço traço por eu acho não lembro 4201 tá vou tentar rodar os dois ao mesmo tempo aqui npm start vamos ver se eu quebrei se eu não quebrei n tem que pesquisar na internet para lembrar como é que roda Tem coisa que a gente só faz uma vez na vida né velho aí tem que lembrar é é rodou 4201 velho Car cara lembra velho não adianta Então esse é uma aplicação de módulos e a aplicação Stalone Nossa tá rodando na 4200 né E esse é a aplicação Stalone exatamente tem nada de diferente nada de diferente perante ao angular legal então gente vamos supor antigamente se você precisava usar ó vou vou vir aqui e vou dar um exemplo para vocês aqui ó no app component do nosso standalone component que eu preciso fazer vamos supor Antigamente você precisaria criar um sei lá criar um input P uma la antes Aqui Label sem esse for aqui sei lá texto e aí cara você precisaria fazer um Binda bind com uma variável que a gente tem aqui ó dentro do nosso arquivo typescript então o que que você faz mesma coisa você vai lá e falou assim ó valor texto por exemplo só que para você utilizar o t data bind se eu fazer aqui vai dar errado ó LG Model igual valor Tex deu errado e se você parar o mouse em cima inclusive Tá pequeno né Tá vendo nenhuma galera aí ó se eu parar o mouse em cima k bind Model no property of input na verdade é uma propriedade sim do input do angular só que o que tá acontecendo é que a gente não importou o módulo do forms Mod para fazer isso aqui funcionar Tá bom Cris e agora na onde que eu importo eu não tenho app mod aqui ó e realmente você não tem você vai importar o que for necessário pro seu componente aqui dentro ó vou dar uma vírgula aqui forms mod olha aqui parou de dar erro é isso Acabou a aula só isso ó rodei 4200 agora tem o nosso texto aqui ó tá vendo ó texto e tá funcionando da mesma forma ó não vou printar esse valor texto para provar que tá funcionando tá funcionando ele parou de dar eu inclusive esse cama mod aqui antigamente Se eu olhar na outra aplicação Opa volta cá fechei o outro ah não tá aqui se eu olhar na outra aplicação mod ele traz aqui já Ah não traz mais o cam mod achei que trazia esse cam modo gente não sei se vocês estão ligado para que que serve ele traz as coisas padrões do angler então date Pipe essas paradas aí tudo vem no cam modic não vou usar nada disso então você pode remover daqui ó não tem nenhum problema essa aula aqui é para ser uma aula rápida mesmo porque a ideia de standalone é para ser rápido só que você começa a ver o quão simples que é isso aqui ó beleza ó vou vir aqui e vou apagar esse camão mod UD aqui porque eu não uso quando eu apago ele limpa aqui em cima sozinho ó vocês viu vocês viam que mágica ó eu não tô usando mais quando eu apago ele limpa isso aqui sozinho por vou dar uma dica Boa PR vocês aqui aqui no Entre em configurações do visual Studio vocês vem aqui no Jon [Música] e organiz aqui ó editor vocês vão adicionar isso aqui ó editor code Action save source P Organize Import through ele vai organizar os imports ou seja ele remove os não utilizados entendeu clicou aqui em cima ó Você veio no settings aqui do deu um control vírgula Command vírgula no Mac clicou aqui em cima aqui nesse botãozinho aqui e editor code Actions on save só um plus aí pra aula aí já tô aqui mesmo então assim gente como que eu faço para mim usar outro componente então aqui dentro simples não Ó vou vir aqui e vou até parar de buildar não tem problema NG GC Sei lá components B vou criar um buton aqui e eu não vou passar aqui a Stalone Por quê eu não preciso passar aqui a standalone porque lá no angular Jon ele já tem umas configurações dizendo que toda vez que eu dar um ngc ele vai ser Stalone beleza inclusive vamos ver se gerou aqui components Button E agora vocês notem ó que o componente já vai vir com standalone na hora Se eu precisar usar esse componente Você lembra que antigamente como que a gente fazia antigamente Se eu precisar usar o daqui a pouco eu vou dar o mesmo exemplo lá Eu precisaria pegar esse botão adicionar ele no declarations de algum módulo da hora e aí eu importar esse novo módulo dentro do módulo que tá o botão na onde eu vou utilizar no caso o componente no caso o app componente tá no app mod então eu teria que criar um mdulo pegar esse botão novo adicionar no declarations do módulo beleza e exportar esse botão do módulo para mim poder acessar ou eu posso também adicionar esse botão novo dentro do declarations do app Model isso vai funcionar também Porém você começa a entender que tem uma complexidade a mais agora não aonde que eu vou utilizar esse App Button aqui não é no app component Então você vai vir aqui no imports porque agora tudo no standalone compones é como se fosse módulo por baixo dos Pan tá então eu venho aqui no imports do próprio componente do app component que é na onde eu vou utilizar e chamo buton component aqui e isso aqui já é o suficiente para mim vir aqui deixa eu fechar Essa paradinha aqui e colocar um deixa eu ver como que eu criei o buton cara deixa eu ver app buton Beleza então vou vir aqui Opa app buton e é nós isso aqui já vai funcionar esse botão vamos ver se vai funcionar Só faltou eu bu de novo né rodando e tá aí ó tá bonito hum é isso falando cara para mim na minha opinião ficou melhor ó o botão aqui ó o nosso componente botão tá aqui legal e agora por exemplo o que que eu vou fazer aqui para dar outro exemplo para vocês quer dizer eu vou eu vou mostrar como que ficaria esse botão se não tivesse estendal compones PR vocês dar uma assimilada na história aí beleza então esse aqui é o nosso app que não é standalone tanto que ele tem esse módulos aqui Cris e se eu criar um app que não é standalone e quiser utilizar os standalone compones se eu não me engano você precisa estar acima do angular 14 ou 15 não vou lembrar agora mas nada que um Google rapidex aí não resolve ó vou dar um exemplo para vocês aqui ó vou gerar um novo arquivo aqui ó sei lá components barra sei lá buton pon comp . ts vou gerar só um botão aqui essa aplicação aqui é uma aplicação de módulo eu agora o que o exemplo que eu quero dar é eu quero criar um componente standalone numa aplicação de módulo Como que eu faço me usar Cris você vai vir aqui e gerar seu componente normal ó @component beleza aqui ó seletor sei lá app buton igual do outro lá a gente assimilando as ideias ah template colocar aqui sei lá vou pôr um parágrafo Opa parágrafo botão funciona escrever em português aqui que sim nós é br E aí você vai marcar também ó Stand Alone true joia E aqui Export Class Button component tô gerando um componente aqui tudo né num arquivo só para mim mostrar para vocês só que diferente dos Stalone como a gente tá acostumado se eu vir aqui no app mod e pegar o meu botão eu não posso vir aqui no app component e adicionar um imports aqui ó ó não posso fazer isso já deu erro mesmo eu marcando o meu componente eu marquei marquei ele como stand true mesmo marcando vai dar erro porque essa é uma aplicação de módulo Então para mim utilizar esse componente tem que ser igual antigamente antig você não vem no app mod aqui dentro do declaration você põe o seu botão component aqui não é só que como o seu botão agora é Stalone Se eu olhar dentro dele aqui ele tá marcado como Stalone ele por ser Stalone ele não vai mais dentro do declarations ele é como se fosse um módulo o botão então todo módulo vem para onde vem para dentro dos imports aqui beleza então você vai jogar o seu botão Stalone dentro do imports quando você tiver numa aplicação normal numa aplicação de módulo Vou salvar o bagulho aqui e vamos ver se vai funcionar 42 faltou adicionar esse botão na ui né velho então eu tô no meu App component aqui vou selecionar tudo e apagar e vou pôr aqui meu App Button não lembro se eu coloquei esse seletor coloquei aí ó botão funciona Beleza então isso significa que sim a gente consegue trabalhar com uma aplicação normal de módulo então se você trampa no lugar onde você tem a sua aplicação de módulo você consegue migrar aos poucos para esse tipo de Stalone aqui que é um conceito novo do angler Demorou simples dessa forma cara basicão e agora só para mostrar o qual melhor é o o o standalone compon eu vou gerar um botão aqui buton ponto modos ponto pera aí component P typ CS é boa gente componente tá errado então e aqui eu vou gerar um um botão normal que não é standalone Beleza então @ component e aqui vou pôr o seletor nele vou pôr outro seletor esse aqui é o app Button mod Beleza eh ele não vai ser standalone então eu só vou passar um template nele aqui aqui ó botão de módulos funciona legal Export Class buton modle component então aqui tá criado o meu botão A diferença é que quando o botão não é standalone na hora de eu usar ele em algum módulo então eu vou vir no app mod aqui ó Cade o menino ele entra no declarations e ele não vai dar erro então assim deixa eu até usar ele aqui para mostrar para vocês que não vai dar erro porque eu gosto de de provar é app buton mod qual que foi o nome que eu dei memória boa minha minha é boa Pelo jeito não foi esse né pelo jeito o nome não foi esse ó eu ó eu cagando o pau ou foi foi ó botão de módulos funciona então um resumo da Ópera aqui para te ajudar quando você tem uma uma quando você tem módulo a questão de módulo aí dentro do seu da su aplicação angler é uma aplicação mais antiga já tá estruturada faz um tempo você não vai gerar uma aplicação do zero e migrar ela do de tudo paraa estalone né não tem valor de mercado você fazer isso então se você chegar no seu chefe e falar ô vou mudar tudo para não faz sentido Não vai valer nada para ele então você pode ir mudando aos poucos aqui ó quando ele não tem standalone ele vai no declarations quando ele tem standalone ele vai aqui dentro do imports igual ele tá aqui agora beleza Ou ele pode ir no declarations desse jeito ou você pode fazer o seguinte ó uma estratégia de mudança aí você pode criar um módulo jogar aqui ó nossa crii um módulo dentro da Ah não é isso mesmo você pode criar um módulo modos aqui e eu vou colocar assim eh components Ponto mod. ts beleza de uma forma bem tranquilona mesmo aqui ó vamos gerar o módulo para gerar o módulo é o gente eu podia est gerando módulo pela clá eu não sei porque que eu tô panguando aqui velho que que eu tenho no módulo mesmo Ah é o módulo Você tem o declarations que é um Array Você tem o imports exports Export Class componen mod então isso aqui é o que você tem hoje por exemplo Então você podia por exemplo pegar o seu componente porque eu não sei se você tá ligado mas se você declarou o seu componente cadê cadê o Mod aqui se você declarou seu componente que não é Stalone dentro de um módulo você não pode declarar ele dentro de outro então uma estratégia que a gente usa você vai tirar o seu componente daqui tirei ele joguei ele aqui dentro do módulo de componentes Beleza deixa eu importar ele aqui só que só de você fazer isso você não aí você vai pegar esse components mod agora e chamar ele no imports aqui ó de você fazer isso o seu componente não vai ficar visível pro seu app component ó tá dando erro por qu porque eu não tô exportando ele então a vantagem de você trampar com módulo é que você tem essa ideia do que você consegue expor do seu módulo então eu venho aqui no Export aqui agora e fala ó exporta aí o buton Mod component E se eu entrar aqui agora tá funcionando beleza então você pode utilizar dessa estratégia aí todo lugar que você precisar usar o seu componente você vai tratar ele pera aí components mod todo lugar que você precisar usar o seu component você vai chamar esse component mó dentro do módulo então fica saca que fica uma ideia um pouquinho meio complexa não sei o que e tal então É isso que o Stalone resolve você viu quão simples que foi trampar com standalone Foi simplesmente criou um arquivo e adicionou ele aqui dentro do imports mas nada Gas só isso Top né de boas de boas de boas e agora agora tem um outro porém Cris eu sei que o módulo ele tem a não eu vou antes de entrar nesse outro conceito quero dar um outro overview para você aqui ó se você tá numa aplicação de módulo e precisa fazer uma chamada http Como que você faz vamos lá vamos fazer o jeito errado aqui eu vou vir no app.

component aqui vou vir aqui sei lá Construtor podia usar o inject também viu gente mas eu tô fazendo isso aqui para não adicionar mal a complexidade Então vamos lá http http Client cara o negócio nunca cara ele nunca importa de primeira velho minha memória tá ficando boa por causa desse bo aí porque toda vez eu tenho que lembrar da cabeça da onde que vem essa criança velho @c http tá gente vocês precisar do negócio é isso aí eu vou vir aqui hdtp CL legal e agora eu consigo utilizar ele vamos achar uns exemplos de api na internet aí cara API examples quero só para só para fazer só para cons Não não quero Car Cadê api exemplo jonk Jon api exemplo só para fazer um teste Ó lá eu tenho artigos aqui que volta um monte de coisa eu quero um bagulho bem simples mano bem Tosco Deixa eu ver se eu acho aqui nada nada n não quero fazer tudo isso aqui não cara Queria um exemplo de api só para mim consumir ela aí ó Cadê o aqui ó top Vamos fazer um teste barra product Vamos tentar fazer um get jogou aqui um get vocês estão ligado aí ó veio todos os produtos é exatamente que eu queria inclusive se eu fazer o Barra um aí ó top uma pii só pra gente consumir ela aqui então não sei se vocês estão ligados mas quando vocês coloca na barra do navegador vocês estão fazendo um get então para testar api é uma beleza então o que que eu vou fazer aqui agora eu vou vir aqui ó no nosso componente e vou colocar uma API aqui ó Então sei lá valor api é igual ele é do tipo sei lá um observable de n n porque para essa aula aqui é isso ó dis pon valor api é igual a http. get ô burro que que eu copiei errado aqui copiar só esse cara aqui ponto vírgula e agora a gente vai consumir esse cara aqui ó Então vou pôr uma div Ô Opa uma div aqui tudo isso para embasar o negócio cara valor api E5 Vou salvar e se eu olhar Cadê ó tá branco por que que tá branco porque ele deu erro ó ele não sabe como que utiliza o http CL se vocês não estão conseguindo ver tá aí ó http CL deu erro beleza no provider for http por porque por padrão se você quer utizar http client do angler numa aplicação que o que não utiliza ST component no imports você tem que vir aqui http client mod fazer isso aqui se eu salvar tá aí ó veio aí o o que eu solicitei aí beleza aí funcionou agora Cris se eu não tenho app mod Como que eu faço por exemplo PR desenvolver esse http client mod aí vamos lá no outro eu não tenho appm não tem aqui ó se eu vir aqui do lado ó aula standalone eu ten components app app. config e não tenho app mod se eu vi aqui e tentar consumir ó eu vou fazer a mesma mesma loucura que eu fiz na outra inclusive vou copiar o código ficar enrolando não ó a mesma coisa ó control c opa vou vir aqui tô no app mod agora [Música] http Nossa cara ô meu Deus de zó estudio meu pai amado cara ajuda eu velho ajuda o cara aqui velho Estamos numa aula maor ruim ficar enrolando velho não gosto de ficar enrolando a aula velho ó http vem aqui http clide beleza Tá aí o nosso carinha e o observable beleza e agora é só consumir esse valor api aqui aqui dentro então vou pôr uma div aqui e valor api Jon não é a ó O ayn ó o ayn por exemplo ele vem do C mod então como eu tirei o cam mod aquela hora vai dar pau eu vou vir aqui e vou falar que eu quero utilizar o a op aí S Pipe Beleza você não precisa trazer o cama mod inteiro e o Jon também ó quando você precisa trazer muita coisa do cam mod aí você você pode até trazer ele inteiro mas vamos lá valor IPI AC Jon vamos ver como que tá funcionando isso aqui essa aqui é o standalone mods 4200 essa aqui é a standalone normal deu o mesmo erro ó só que agora a gente não tem Deixa eu voltar lá mano porque eu fui muito rápido o mesmo R3 injector tá vendo ó http client n né agora a gente não tem o app mod Então a gente tem agora esse App config aqui ó dentro desse app config Você pode passar e as configurações de providers que você quer Beleza tanto aqui quanto nos seus componentes não sei se vocês estão ligados no componente Dependendo do que você for usar Você tem os providers aqui também beleza tanto que service se eu não me engano você vai jogar dentro dos providers aqui legal a não ser que você coloca o provider de Root lá já era então est aí ó dentro dos provid iders você vai jogar aqui o provide http client olha is só só vou salvar isso aqui e quando eu olhar na minha aplicação ela tá funcionando então essa também é outra grande diferença que antigamente a gente tinha tem um iPhone 9 ali antigamente a gente tinha um app Mod para configurar essas paradas mais simples porém agora nos standalone vocês vão ver nas documentações como que configura utilizando esse App config aqui beleza eu preferi dessa forma eu acho muito mais simples ó coloca aqui e aí você já tá utilizando aqui você não precisa ficar pescando e tal tá funcionando num boa Gostei dessa ideia agora uma outra diferença que tem também PR standalone Apps do que PR apps normal vamos supor que eu preciso de uma página nova aqui seria o las loading tá gente então eu vou criar um pages aqui e vou criar Sei lá uma página chamado home P page.

com typescript Beleza vou gerar aqui uma página Nossa Senhora component uma página também é um component uma página não precisa de um seletor né gente então eu tenho aqui o meu template v p um p eh sou uma página de home beleza Export Class home page component tá joia isso aqui eu tô num componente standalone no para você fazer lazy loading anteriormente Como que você fazia Deixa eu pensar aqui agora porque senão eu tô achando que eu vou bugar vocês tá vamos lá tá bom vamos lá para você fazer lasing load anteriormente você adicionava né o caminho do módulo que tava a sua página aí você tinha um router mod tudo esse esquema só que hoje você não precisa mais disso por exemplo aqui ó ten um homepage Point eu vou gerar o meu arquivo de rotas porque na hora que foi para começar aqui eu não gerei vou chorar velho então só para app. rs. typescript beleza e aqui eu vou fazer o Export routes gente se lá no começo eu não tivesse colocado não não ia precisar fazer isso tá router Cadê o tipo routes tipo routs tem que colocar aqui ó Export R aqui ó faltou o const ali routes beleza e aí aqui eu vou montar a minha rota do mesmo jeito ó então eu vou vou dizer aqui ó sei lá PF né que é o caminho da Rota sei lá home só que anteriormente a gente utilizava o load Children não era isso para conseguir fazer o lazy loading agora a gente tem o load component joia Então a gente vai utilizar o o load component da mesma forma Então é isso aqui Import na onde que eu tô tô no app ponto barra pages barh beleza ele vai dar um erro porque para isso aqui funcionar de cara Export the full Class aí você não precisa utilizar aquele den lá vamos lá no nosso arquivo de rotas tá aí ó então caguei o pau velho tava lá então olha como que ficou você faz um load com ponent direto na sua página você não tem mais que jogar sua página dentro de um é dentro de um arquivo de módulo e fazer um load Toing do seu módulo você vai fazer um load component da sua página porque tudo que você precisar desenvolver dentro da sua página Você concorda que vai tá dentro do imports aqui o @component já vai ter tudo então Essa é uma das vantagens também do do dos componentes agora vamos lembrar velho agora agora fodeu porque eu não lembro de Corsa aqui velho fiz uma vez ó como que eu utilizo esse routes aqui Teoricamente deve ser no app config porque aqui é onde a gente usa tudo providers vou até jogar aqui provide router E rout se eu não me engano é só isso aqui tá Isso aqui já deve estar configurando Você viu como que ficou agora na minha opinião ficou mais simples Ó ficou mais intuitivo provide router qual queer as rotas que você vai est utilizando na sua aplicação Então a gente tem um arquivo VM de rotas igual eu montei aqui já resolve a vida app.