[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-pt":3,"post:\u002Fpt\u002Fpost\u002Fmicrofrontends-com-angular-e-nx-o-que-ninguem-conta":37},[4,11,17,24,30],{"id":5,"slug":6,"name":7,"colorHex":8,"iconName":9,"postCount":10},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",null,28,{"id":12,"slug":13,"name":14,"colorHex":15,"iconName":9,"postCount":16},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Programação & Dev","#8b5cf6",20,{"id":18,"slug":19,"name":20,"colorHex":21,"iconName":22,"postCount":23},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Inteligência Artificial","#6366f1","brain",16,{"id":25,"slug":26,"name":27,"colorHex":28,"iconName":9,"postCount":29},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Notícias Tech","#e50606",8,{"id":31,"slug":32,"name":33,"colorHex":34,"iconName":35,"postCount":36},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","Guias & Tutoriais","#be123c","book-open",5,{"post":38,"related":1353,"translations":1424,"resolved":9},{"id":39,"slug":40,"title":41,"excerpt":42,"image":43,"featured":44,"groupId":45,"publishedAt":46,"readingTime":23,"views":47,"author":48,"category":50,"tags":51,"contentJson":61,"metaTitle":1350,"metaDescription":1351,"updatedAt":1352},"51c199b8-6ecb-4f37-add6-a3242221ab88","microfrontends-com-angular-e-nx-o-que-ninguem-conta","Microfrontends com Angular e Nx: o que ninguém conta","Todo tutorial ensina a configurar microfrontends em minutos, mas poucos revelam o caos arquitetural que surge após meses de deploy em produção.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785206853570-featured-zoyhgn.webp",false,"3368e1b2-b6de-4e94-a3d4-294fae8ade13","2026-07-28T02:50:42.864559+00:00",37,{"name":49,"avatar":9},"Genildo Souza",{"slug":13,"name":14,"color":15},[52,55,58],{"slug":53,"name":54},"angular","Angular",{"slug":56,"name":57},"typescript","TypeScript",{"slug":59,"name":60},"javascript","JavaScript",{"type":62,"content":63},"doc",[64,75,83,85,93,102,108,114,120,141,148,149,155,161,178,200,210,220,248,249,255,262,268,276,283,291,311,312,318,324,330,338,345,371,372,378,384,410,417,424,425,431,437,445,452,484,485,491,497,504,511,537,538,544,760,780,786,931,932,938,944,952,959,975,976,984,991,1006,1007,1015,1022,1031,1032,1048,1055,1069,1070,1092,1101,1102,1123,1132,1133,1140,1141,1147,1157,1182,1188,1194,1213,1216,1224,1225,1231,1347],{"type":65,"attrs":66},"summaryBox",{"id":67,"items":68,"title":74},"sum_9dj9myqg",[69,70,71,72,73],"Microfrontends frequentemente levam três meses para implementar e nove meses para estabilizar devido a problemas de produção não previstos.","O compartilhamento de estado global entre remotes anula a independência dos deploys, tornando o sistema acoplado e difícil de manter.","Conflitos de CSS entre remotes são problemas não determinísticos que exigem o uso de namespaces rigorosos para evitar vazamento de estilos.","O uso do Nx com configurações estritas de versionamento é essencial para evitar falhas silenciosas causadas por incompatibilidades de bibliotecas.","Manter versões diferentes do Angular em um mesmo monorepo Nx é inviável, sendo necessário realizar migrações globais em todo o workspace.","Desafios reais de Microfrontends com Angular",{"type":76,"attrs":77,"content":79},"paragraph",{"id":78},"p_lvlt2h2j",[80],{"text":81,"type":82},"Todo tutorial mostra como configurar o Module Federation em 20 minutos. Nenhum mostra o que acontece 6 meses depois em produção — o CSS que vaza entre remotes, a versão do Angular que derruba o shell, o estado compartilhado que tornou o deploy independente impossível, e o custo organizacional que o diagrama arquitetural não captura.","text",{"type":84},"horizontalRule",{"type":86,"attrs":87,"content":90},"heading",{"id":88,"level":89},"h_9sne1pdm",2,[91],{"text":92,"type":82},"A realidade que o tutorial não mostra",{"type":76,"attrs":94,"content":96},{"id":95},"p_xripo1li",[97],{"text":98,"type":82,"marks":99},"O tutorial termina onde o problema começa.",[100],{"type":101},"bold",{"type":76,"attrs":103,"content":105},{"id":104},"p_nzji425p",[106],{"text":107,"type":82},"A maioria das equipes que implanta microfrontends chega a produção em 3 meses e gasta os próximos 9 meses resolvendo problemas que nenhum tutorial mencionou.",{"type":76,"attrs":109,"content":111},{"id":110},"p_7g3vwg2p",[112],{"text":113,"type":82},"O modelo é sedutor: times independentes, deploys independentes, autonomia de tecnologia. Na prática, a independência prometida tem um custo que só aparece quando um time tenta subir uma versão do Angular enquanto outro ainda está no ciclo anterior. Ou quando o CSS do remote de checkout começa a afetar o layout do shell. Ou quando você descobre que o estado compartilhado que colocou em um serviço global tornou o deploy independente tecnicamente impossível.",{"type":115,"attrs":116},"pullquote",{"id":117,"quote":118,"accent":119,"attribution":41},"pq_atgzd9bs","A arquitetura de microfrontends não falha no código. Falha nas fronteiras que você não definiu.","red",{"type":121,"attrs":122,"content":124},"blockquote",{"id":123},"quote_gehsdmec",[125],{"type":76,"attrs":126,"content":128},{"id":127},"p_heusukbt",[129,133,135,139],{"text":130,"type":82,"marks":131},"→ O número que importa",[132],{"type":101},{"text":134,"type":82}," Em uma pesquisa com 20+ projetos de microfrontend de 2021-2023, o padrão era consistente: ",{"text":136,"type":82,"marks":137},"3 meses para implementar, 9 meses para estabilizar",[138],{"type":101},{"text":140,"type":82},". Os problemas de state compartilhado, CSS leaking e version mismatch não aparecem em demos — aparecem quando os times começam a trabalhar de forma genuinamente independente.",{"type":76,"attrs":142,"content":144},{"id":143},"p_im70meu4",[145],{"text":118,"type":82,"marks":146},[147],{"type":101},{"type":84},{"type":86,"attrs":150,"content":152},{"id":151,"level":89},"h_sktc911w",[153],{"text":154,"type":82},"Os 5 problemas de produção",{"type":76,"attrs":156,"content":158},{"id":157},"p_7fbtv1me",[159],{"text":160,"type":82},"O que acontece 6 meses depois do deploy.",{"type":76,"attrs":162,"content":164},{"id":163},"p_dr33z3om",[165,169,171,176],{"text":166,"type":82,"marks":167},"Problema 01 — Version mismatch — o crash silencioso:",[168],{"type":101},{"text":170,"type":82}," Time A usa Angular 21. Time B faz upgrade para Angular 22 com a nova API de Signal Forms. O shell carrega os dois. O Module Federation tenta reconciliar as versões com ",{"text":172,"type":82,"marks":173},"singleton: true",[174],{"type":175},"code",{"text":177,"type":82},". Às vezes funciona. Às vezes o remote B crasha sem mensagem de erro óbvia.",{"type":76,"attrs":179,"content":181},{"id":180},"p_xsx78eft",[182,186,188,192,194,198],{"text":183,"type":82,"marks":184},"Problema 02 — CSS leaking — o estilo que não tem fronteiras:",[185],{"type":101},{"text":187,"type":82}," O remote de checkout define ",{"text":189,"type":82,"marks":190},".btn { background: red }",[191],{"type":175},{"text":193,"type":82}," sem escopo. O shell tem ",{"text":195,"type":82,"marks":196},".btn { background: blue }",[197],{"type":175},{"text":199,"type":82},". Dependendo da ordem de carregamento, um sobrescreve o outro. Em produção, a ordem muda com caching. O bug é não determinístico.",{"type":76,"attrs":201,"content":203},{"id":202},"p_bklwjnzf",[204,208],{"text":205,"type":82,"marks":206},"Problema 03 — Estado global — o deploy que não é independente:",[207],{"type":101},{"text":209,"type":82}," Para compartilhar o usuário autenticado, alguém colocou o estado em um NgRx Store compartilhado entre todos os remotes. Agora, qualquer mudança no shape do estado exige deploy coordenado de todos os remotes. O deploy \"independente\" deixou de ser independente.",{"type":76,"attrs":211,"content":213},{"id":212},"p_flq7ykm3",[214,218],{"text":215,"type":82,"marks":216},"Problema 04 — DX em desenvolvimento — 4 terminais para 1 feature:",[217],{"type":101},{"text":219,"type":82}," Para rodar o feature de checkout localmente, o dev precisa iniciar shell, catalog-mfe, admin-mfe e checkout-mfe. O tempo de setup local triplicou. A autonomia do time veio com um overhead de DX que ninguém contabilizou.",{"type":76,"attrs":221,"content":223},{"id":222},"p_14tatuy1",[224,228,230,234,236,240,242,246],{"text":225,"type":82,"marks":226},"Problema 05 — Bundle size — o compartilhamento que não compartilhou:",[227],{"type":101},{"text":229,"type":82}," Cada remote empacotou sua própria cópia do Angular Material porque a configuração de ",{"text":231,"type":82,"marks":232},"shared",[233],{"type":175},{"text":235,"type":82}," não incluiu as entradas secundárias (",{"text":237,"type":82,"marks":238},"@angular\u002Fmaterial\u002Fbutton",[239],{"type":175},{"text":241,"type":82},", ",{"text":243,"type":82,"marks":244},"@angular\u002Fmaterial\u002Fdialog",[245],{"type":175},{"text":247,"type":82},"). O bundle total ficou 3x maior do que o monolito original.",{"type":84},{"type":86,"attrs":250,"content":252},{"id":251,"level":89},"h_j0yk8ett",[253],{"text":254,"type":82},"Solução 01 — Version mismatch",{"type":86,"attrs":256,"content":259},{"id":257,"level":258},"h_40wu974z",3,[260],{"text":261,"type":82},"Governança de versões: o Nx como árbitro",{"type":76,"attrs":263,"content":265},{"id":264},"p_mtv0xfn4",[266],{"text":267,"type":82},"O Module Federation permite versões diferentes. O Nx, por padrão, não permite — e essa restrição é um feature, não um bug.",{"type":269,"attrs":270,"content":273},"codeBlock",{"id":271,"language":56,"highlighted":272},"code_cdu9d5rv","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ❌ Configuração que causa crashes silenciosos\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F module-federation.config.ts (remote checkout)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> config\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ModuleFederationConfig\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  name: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'checkout'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  exposes: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    '.\u002FModule'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'.\u002Fsrc\u002Fapp\u002Fremote-entry\u002Fentry.module.ts'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  shared: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    \u002F\u002F ❌ singleton sem requiredVersion = aceita qualquer versão\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    \u002F\u002F Se shell tem Angular 21 e remote tem Angular 22,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    \u002F\u002F o Module Federation carrega a versão do shell silenciosamente\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    '@angular\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: { singleton: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    '@angular\u002Fcommon'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: { singleton: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[274],{"text":275,"type":82},"\u002F\u002F ❌ Configuração que causa crashes silenciosos\n\u002F\u002F module-federation.config.ts (remote checkout)\nexport const config: ModuleFederationConfig = {\n  name: 'checkout',\n  exposes: {\n    '.\u002FModule': '.\u002Fsrc\u002Fapp\u002Fremote-entry\u002Fentry.module.ts',\n  },\n  shared: {\n    \u002F\u002F ❌ singleton sem requiredVersion = aceita qualquer versão\n    \u002F\u002F Se shell tem Angular 21 e remote tem Angular 22,\n    \u002F\u002F o Module Federation carrega a versão do shell silenciosamente\n    '@angular\u002Fcore': { singleton: true },\n    '@angular\u002Fcommon': { singleton: true },\n  },\n};\n",{"type":269,"attrs":277,"content":280},{"id":278,"language":56,"highlighted":279},"code_k1zbef1c","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ✅ Governança de versão explícita com Nx\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F libs\u002Fshared-mf-config\u002Fbase.config.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { shareAll } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@nx\u002Fangular\u002Fmodule-federation'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> baseConfig\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  shared: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    \u002F\u002F ✅ requiredVersion: 'auto' lê do package.json do workspace\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    \u002F\u002F strictVersion: true → falha se versão incompatível\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    '@angular\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      singleton: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      strictVersion: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      requiredVersion: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'auto'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ← Nx resolve do root package.json\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    '@angular\u002Frouter'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: { singleton: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, strictVersion: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, requiredVersion: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'auto'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    '@angular\u002Fforms'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: { singleton: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, strictVersion: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, requiredVersion: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'auto'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[281],{"text":282,"type":82},"\u002F\u002F ✅ Governança de versão explícita com Nx\n\u002F\u002F libs\u002Fshared-mf-config\u002Fbase.config.ts\nimport { shareAll } from '@nx\u002Fangular\u002Fmodule-federation';\n\nexport const baseConfig = {\n  shared: {\n    \u002F\u002F ✅ requiredVersion: 'auto' lê do package.json do workspace\n    \u002F\u002F strictVersion: true → falha se versão incompatível\n    '@angular\u002Fcore': {\n      singleton: true,\n      strictVersion: true,\n      requiredVersion: 'auto', \u002F\u002F ← Nx resolve do root package.json\n    },\n    '@angular\u002Frouter': { singleton: true, strictVersion: true, requiredVersion: 'auto' },\n    '@angular\u002Fforms': { singleton: true, strictVersion: true, requiredVersion: 'auto' },\n  }\n};\n",{"type":269,"attrs":284,"content":288},{"id":285,"language":286,"highlighted":287},"code_qxeefz63","bash","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># Ver quais apps precisam ser (re)deployados após mudança em libs\u002Fauth\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> affected --target=build --base=main\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Output:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Affected projects:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   shell          ← host sempre afetado quando auth muda\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   checkout-mfe   ← usa AuthGuard da libs\u002Fauth\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   admin-mfe      ← usa AuthService da libs\u002Fauth\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> NOT affected:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   catalog-mfe    ← não depende de libs\u002Fauth\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Quando você ATUALIZA o Angular (major version):\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> migrate @angular\u002Fcore@22\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> migrate --run-migrations\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Aplica migrações em TODOS os apps do workspace de uma vez\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[289],{"text":290,"type":82},"# Ver quais apps precisam ser (re)deployados após mudança em libs\u002Fauth\nnx affected --target=build --base=main\n\n# Output:\n# Affected projects:\n#   shell          ← host sempre afetado quando auth muda\n#   checkout-mfe   ← usa AuthGuard da libs\u002Fauth\n#   admin-mfe      ← usa AuthService da libs\u002Fauth\n# NOT affected:\n#   catalog-mfe    ← não depende de libs\u002Fauth\n\n# Quando você ATUALIZA o Angular (major version):\nnx migrate @angular\u002Fcore@22\nnx migrate --run-migrations\n# Aplica migrações em TODOS os apps do workspace de uma vez\n",{"type":121,"attrs":292,"content":294},{"id":293},"quote_3tamwkkv",[295],{"type":76,"attrs":296,"content":298},{"id":297},"p_apvf9wzi",[299,303,305,309],{"text":300,"type":82,"marks":301},"⚠️ A regra do Angular em monorepo Nx",[302],{"type":101},{"text":304,"type":82}," Quando você faz upgrade do Angular em um workspace Nx, ",{"text":306,"type":82,"marks":307},"todos os apps do workspace sobem juntos",[308],{"type":101},{"text":310,"type":82},". Isso é intencional — a alternativa é o inferno de versões mistas. Se dois times precisam de versões diferentes de Angular, eles precisam de repositórios separados — e aí perdem as vantagens do monorepo Nx.",{"type":84},{"type":86,"attrs":313,"content":315},{"id":314,"level":89},"h_ueb223he",[316],{"text":317,"type":82},"Solução 02 — CSS leaking",{"type":86,"attrs":319,"content":321},{"id":320,"level":258},"h_yc2nnn3y",[322],{"text":323,"type":82},"Isolamento de estilos: ViewEncapsulation não é suficiente",{"type":76,"attrs":325,"content":327},{"id":326},"p_ge968kyo",[328],{"text":329,"type":82},"O ViewEncapsulation do Angular isola estilos de componentes mas não resolve os estilos globais que cada remote define.",{"type":269,"attrs":331,"content":335},{"id":332,"language":333,"highlighted":334},"code_e4uta8u1","css","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* ❌ Sem namespace — vaza para o shell e outros remotes *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">#1a1a2e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.btn\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">#e94560\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">white\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">z-index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1000\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }  \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* ← conflita com overlays do shell *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[336],{"text":337,"type":82},"\u002F* ❌ Sem namespace — vaza para o shell e outros remotes *\u002F\n.card { background: #1a1a2e; border-radius: 8px; }\n.btn  { background: #e94560; color: white; }\n.overlay { z-index: 1000; }  \u002F* ← conflita com overlays do shell *\u002F\n",{"type":269,"attrs":339,"content":342},{"id":340,"language":333,"highlighted":341},"code_kimisvqc","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* ✅ Solução 1: Namespace SCSS por remote *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* checkout-mfe\u002Fsrc\u002Fstyles.scss *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.checkout-mfe\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">#1a1a2e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  .btn\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">#e94560\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">white\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  .overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">z-index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* No componente raiz do remote: *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* <div class=\"checkout-mfe\"><router-outlet \u002F><\u002Fdiv> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* ✅ Solução 2: CSS Custom Properties do Design System no shell *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* O shell define as variáveis. Os remotes consomem. Nunca definem. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">:root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  --ds-color-primary\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">#dd0031\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  --ds-color-surface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">#161b22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  --ds-radius-card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  --ds-z-overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  --ds-z-modal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:   \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">300\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  --ds-z-toast\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:   \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">400\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Remotes APENAS consomem variáveis — nunca definem novos z-index absolutos *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[343],{"text":344,"type":82},"\u002F* ✅ Solução 1: Namespace SCSS por remote *\u002F\n\u002F* checkout-mfe\u002Fsrc\u002Fstyles.scss *\u002F\n.checkout-mfe {\n  .card   { background: #1a1a2e; border-radius: 8px; }\n  .btn    { background: #e94560; color: white; }\n  .overlay { z-index: 100; }\n}\n\n\u002F* No componente raiz do remote: *\u002F\n\u002F* \u003Cdiv class=\"checkout-mfe\">\u003Crouter-outlet \u002F>\u003C\u002Fdiv> *\u002F\n\n\u002F* ✅ Solução 2: CSS Custom Properties do Design System no shell *\u002F\n\u002F* O shell define as variáveis. Os remotes consomem. Nunca definem. *\u002F\n:root {\n  --ds-color-primary: #dd0031;\n  --ds-color-surface: #161b22;\n  --ds-radius-card: 8px;\n  --ds-z-overlay: 200;\n  --ds-z-modal:   300;\n  --ds-z-toast:   400;\n}\n\n\u002F* Remotes APENAS consomem variáveis — nunca definem novos z-index absolutos *\u002F\n",{"type":121,"attrs":346,"content":348},{"id":347},"quote_ucgrlxvx",[349],{"type":76,"attrs":350,"content":352},{"id":351},"p_e3tpmk2k",[353,357,359,363,365,369],{"text":354,"type":82,"marks":355},"✅ A regra de ouro de CSS em MFEs",[356],{"type":101},{"text":358,"type":82}," ",{"text":360,"type":82,"marks":361},"O shell é o único dono dos estilos globais.",[362],{"type":101},{"text":364,"type":82}," Remotes consomem CSS Custom Properties definidas pelo shell. ",{"text":366,"type":82,"marks":367},"Nenhum remote define valores absolutos de z-index",[368],{"type":101},{"text":370,"type":82}," — esse é o bug mais difícil de debugar em produção, porque z-index depende do contexto de empilhamento e o shell não controla o contexto do remote.",{"type":84},{"type":86,"attrs":373,"content":375},{"id":374,"level":89},"h_29psv36z",[376],{"text":377,"type":82},"Solução 03 — Estado compartilhado",{"type":86,"attrs":379,"content":381},{"id":380,"level":258},"h_haz8sg9r",[382],{"text":383,"type":82},"O estado que destrói o deploy independente",{"type":121,"attrs":385,"content":387},{"id":386},"quote_kzx5hri1",[388],{"type":76,"attrs":389,"content":391},{"id":390},"p_xh34wmdu",[392,396,398,402,404,408],{"text":393,"type":82,"marks":394},"⚠️ O anti-padrão mais comum em MFEs",[395],{"type":101},{"text":397,"type":82}," Colocar o estado do usuário autenticado em um NgRx Store ",{"text":399,"type":82,"marks":400},"compartilhado via Module Federation",[401],{"type":101},{"text":403,"type":82}," entre todos os remotes. Parece certo — \"é estado global, deve ficar no NgRx global\". O problema é que qualquer mudança no shape desse estado exige que ",{"text":405,"type":82,"marks":406},"todos os remotes sejam atualizados e deployados ao mesmo tempo",[407],{"type":101},{"text":409,"type":82},". O deploy \"independente\" deixa de ser independente.",{"type":269,"attrs":411,"content":414},{"id":412,"language":56,"highlighted":413},"code_6rkrr1jd","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F libs\u002Fcore\u002Fsrc\u002Flib\u002Fevent-bus.service.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ✅ O Event Bus é o contrato entre remotes — não o shape do estado\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Injectable } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@angular\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Subject, filter, map } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'rxjs'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> MfeEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  payload\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> unknown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  source\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> UserAuthenticatedEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> MfeEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> &\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'user.authenticated'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  payload\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">    userId\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">   string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">    tenantId\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    \u002F\u002F ✅ Apenas os campos que outros remotes REALMENTE precisam\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> CartUpdatedEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> MfeEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> &\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'cart.updated'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  payload\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">itemCount\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">total\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Injectable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ providedIn: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'root'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> EventBusService\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  private\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\"> bus$\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Subject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">MfeEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  emit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> MfeEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> void\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">    this\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.bus$.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(event);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">T\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> extends\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> MfeEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> T\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'type'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.bus$.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">pipe\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> e.type \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> type),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> e \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> T\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ✅ No shell — emite após autenticação\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F eventBus.emit({ type: 'user.authenticated', payload: { userId, tenantId }, source: 'shell' });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ✅ No checkout-mfe — escuta sem saber nada do shell\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F eventBus.on<UserAuthenticatedEvent>('user.authenticated').subscribe(...)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Quando o shape do usuário muda, você versiona o evento:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F 'user.authenticated.v2' — backward compatible, remotes migram no seu ritmo\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[415],{"text":416,"type":82},"\u002F\u002F libs\u002Fcore\u002Fsrc\u002Flib\u002Fevent-bus.service.ts\n\u002F\u002F ✅ O Event Bus é o contrato entre remotes — não o shape do estado\nimport { Injectable } from '@angular\u002Fcore';\nimport { Subject, filter, map } from 'rxjs';\n\nexport interface MfeEvent {\n  type: string;\n  payload: unknown;\n  source: string;\n}\n\nexport type UserAuthenticatedEvent = MfeEvent & {\n  type: 'user.authenticated';\n  payload: {\n    userId:   string;\n    tenantId: string;\n    \u002F\u002F ✅ Apenas os campos que outros remotes REALMENTE precisam\n  };\n};\n\nexport type CartUpdatedEvent = MfeEvent & {\n  type: 'cart.updated';\n  payload: { itemCount: number; total: number };\n};\n\n@Injectable({ providedIn: 'root' })\nexport class EventBusService {\n  private bus$ = new Subject\u003CMfeEvent>();\n\n  emit(event: MfeEvent): void {\n    this.bus$.next(event);\n  }\n\n  on\u003CT extends MfeEvent>(type: T['type']) {\n    return this.bus$.pipe(\n      filter(e => e.type === type),\n      map(e => e as T)\n    );\n  }\n}\n\n\u002F\u002F ✅ No shell — emite após autenticação\n\u002F\u002F eventBus.emit({ type: 'user.authenticated', payload: { userId, tenantId }, source: 'shell' });\n\n\u002F\u002F ✅ No checkout-mfe — escuta sem saber nada do shell\n\u002F\u002F eventBus.on\u003CUserAuthenticatedEvent>('user.authenticated').subscribe(...)\n\n\u002F\u002F Quando o shape do usuário muda, você versiona o evento:\n\u002F\u002F 'user.authenticated.v2' — backward compatible, remotes migram no seu ritmo\n",{"type":269,"attrs":418,"content":421},{"id":419,"language":56,"highlighted":420},"code_p54enlzy","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ✅ Se você PRECISA de estado compartilhado, compartilhe o mínimo\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> AUTH_CONTEXT\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> InjectionToken\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">AuthContext\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'AUTH_CONTEXT'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> AuthContext\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Apenas o que é genuinamente necessário para TODOS os remotes\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  userId\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">   string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  tenantId\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  isAuthenticated\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F ❌ NÃO coloque: permissions, roles, profile, preferences\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[422],{"text":423,"type":82},"\u002F\u002F ✅ Se você PRECISA de estado compartilhado, compartilhe o mínimo\nexport const AUTH_CONTEXT = new InjectionToken\u003CAuthContext>('AUTH_CONTEXT');\n\nexport interface AuthContext {\n  \u002F\u002F Apenas o que é genuinamente necessário para TODOS os remotes\n  userId:   string | null;\n  tenantId: string | null;\n  isAuthenticated: boolean;\n  \u002F\u002F ❌ NÃO coloque: permissions, roles, profile, preferences\n}\n",{"type":84},{"type":86,"attrs":426,"content":428},{"id":427,"level":89},"h_3r7uwxwp",[429],{"text":430,"type":82},"Solução 04 — Developer Experience",{"type":86,"attrs":432,"content":434},{"id":433,"level":258},"h_9f55wipn",[435],{"text":436,"type":82},"Desenvolvimento local sem 4 terminais abertos",{"type":269,"attrs":438,"content":442},{"id":439,"language":440,"highlighted":441},"code_amhbp483","json","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F shell\u002Fsrc\u002Fassets\u002Fmodule-federation.manifest.json\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ✅ Dynamic Module Federation — a URL do remote é resolvida em runtime\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  \"checkout\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"http:\u002F\u002Flocalhost:4201\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  \"catalog\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:  \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"http:\u002F\u002Flocalhost:4202\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  \"admin\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:    \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"http:\u002F\u002Flocalhost:4203\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F shell\u002Fsrc\u002Fassets\u002Fmodule-federation.manifest.staging.json\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  \"checkout\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"https:\u002F\u002Fcheckout.staging.example.com\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  \"catalog\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:  \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"https:\u002F\u002Fcatalog.staging.example.com\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  \"admin\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:    \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"https:\u002F\u002Fadmin.staging.example.com\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[443],{"text":444,"type":82},"\u002F\u002F shell\u002Fsrc\u002Fassets\u002Fmodule-federation.manifest.json\n\u002F\u002F ✅ Dynamic Module Federation — a URL do remote é resolvida em runtime\n{\n  \"checkout\": \"http:\u002F\u002Flocalhost:4201\",\n  \"catalog\":  \"http:\u002F\u002Flocalhost:4202\",\n  \"admin\":    \"http:\u002F\u002Flocalhost:4203\"\n}\n\n\u002F\u002F shell\u002Fsrc\u002Fassets\u002Fmodule-federation.manifest.staging.json\n{\n  \"checkout\": \"https:\u002F\u002Fcheckout.staging.example.com\",\n  \"catalog\":  \"https:\u002F\u002Fcatalog.staging.example.com\",\n  \"admin\":    \"https:\u002F\u002Fadmin.staging.example.com\"\n}\n",{"type":269,"attrs":446,"content":449},{"id":447,"language":286,"highlighted":448},"code_8g7861ba","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># ✅ Inicia o shell + checkout em modo live\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># catalog e admin são servidos como static (sem live reload)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> serve shell --devRemotes=checkout\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Inicia o shell + dois remotes em modo live\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> serve shell --devRemotes=checkout,catalog\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Com Dynamic Module Federation — aponta para staging:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> O dev desenvolve checkout localmente, catalog e admin vêm do staging\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">cp\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> src\u002Fassets\u002Fmodule-federation.manifest.staging.json \\\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   src\u002Fassets\u002Fmodule-federation.manifest.json\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[450],{"text":451,"type":82},"# ✅ Inicia o shell + checkout em modo live\n# catalog e admin são servidos como static (sem live reload)\nnx serve shell --devRemotes=checkout\n\n# Inicia o shell + dois remotes em modo live\nnx serve shell --devRemotes=checkout,catalog\n\n# Com Dynamic Module Federation — aponta para staging:\n# O dev desenvolve checkout localmente, catalog e admin vêm do staging\ncp src\u002Fassets\u002Fmodule-federation.manifest.staging.json \\\n   src\u002Fassets\u002Fmodule-federation.manifest.json\n",{"type":121,"attrs":453,"content":455},{"id":454},"quote_u774z4f7",[456],{"type":76,"attrs":457,"content":459},{"id":458},"p_rydjflja",[460,464,466,470,472,476,478,482],{"text":461,"type":82,"marks":462},"→ O padrão Nx recomendado para DX",[463],{"type":101},{"text":465,"type":82}," Configure um target ",{"text":467,"type":82,"marks":468},"serve-with-staging-remotes",[469],{"type":175},{"text":471,"type":82}," no ",{"text":473,"type":82,"marks":474},"project.json",[475],{"type":175},{"text":477,"type":82}," do shell. ",{"text":479,"type":82,"marks":480},"O dev inicia um único terminal",[481],{"type":101},{"text":483,"type":82},", o shell carrega o remote local que está desenvolvendo e os outros remotes do staging. Nenhum mock, nenhum stub — ambiente real com um remote vivo.",{"type":84},{"type":86,"attrs":486,"content":488},{"id":487,"level":89},"h_kncvfmpz",[489],{"text":490,"type":82},"Solução 05 — Bundle size",{"type":86,"attrs":492,"content":494},{"id":493,"level":258},"h_jo3hr57y",[495],{"text":496,"type":82},"O compartilhamento que não compartilhou nada",{"type":269,"attrs":498,"content":501},{"id":499,"language":56,"highlighted":500},"code_3h3g6ovk","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ❌ Shared incompleto — cada remote tem sua própria cópia do Material\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">shared\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  '@angular\u002Fmaterial'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: { singleton: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, strictVersion: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Problema: @angular\u002Fmaterial\u002Fbutton é uma entrada separada\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F → Cada remote vai empacotar sua própria cópia desses módulos\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F → Bundle total: shell(mat\u002Fbutton) + checkout(mat\u002Fbutton) = 3x\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[502],{"text":503,"type":82},"\u002F\u002F ❌ Shared incompleto — cada remote tem sua própria cópia do Material\nshared: {\n  '@angular\u002Fmaterial': { singleton: true, strictVersion: true },\n  \u002F\u002F Problema: @angular\u002Fmaterial\u002Fbutton é uma entrada separada\n  \u002F\u002F → Cada remote vai empacotar sua própria cópia desses módulos\n  \u002F\u002F → Bundle total: shell(mat\u002Fbutton) + checkout(mat\u002Fbutton) = 3x\n}\n",{"type":269,"attrs":505,"content":508},{"id":506,"language":56,"highlighted":507},"code_tfpocqet","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ✅ shareAll com entradas secundárias — a configuração correta\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { shareAll } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@nx\u002Fangular\u002Fmodule-federation'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F shareAll compartilha AUTOMATICAMENTE todos os pacotes do package.json\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Incluindo entradas secundárias como @angular\u002Fmaterial\u002Fbutton\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> sharedDeps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> shareAll\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  singleton: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  strictVersion: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  requiredVersion: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'auto'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F module-federation.config.ts de cada remote:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> config\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ModuleFederationConfig\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  name: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'checkout'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  exposes: { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'.\u002FModule'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'.\u002Fsrc\u002Fapp\u002Fremote-entry\u002Fentry.module.ts'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  shared: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    ...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">sharedDeps,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Resultado com shareAll:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Bundle antes: shell(300KB) + checkout(280KB) + catalog(275KB) = 855KB\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Bundle depois: shell(300KB) + checkout(80KB) + catalog(75KB) = 455KB\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Redução de ~47% no total transferido\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[509],{"text":510,"type":82},"\u002F\u002F ✅ shareAll com entradas secundárias — a configuração correta\nimport { shareAll } from '@nx\u002Fangular\u002Fmodule-federation';\n\n\u002F\u002F shareAll compartilha AUTOMATICAMENTE todos os pacotes do package.json\n\u002F\u002F Incluindo entradas secundárias como @angular\u002Fmaterial\u002Fbutton\nexport const sharedDeps = shareAll({\n  singleton: true,\n  strictVersion: true,\n  requiredVersion: 'auto',\n});\n\n\u002F\u002F module-federation.config.ts de cada remote:\nexport const config: ModuleFederationConfig = {\n  name: 'checkout',\n  exposes: { '.\u002FModule': '.\u002Fsrc\u002Fapp\u002Fremote-entry\u002Fentry.module.ts' },\n  shared: {\n    ...sharedDeps,\n  },\n};\n\n\u002F\u002F Resultado com shareAll:\n\u002F\u002F Bundle antes: shell(300KB) + checkout(280KB) + catalog(275KB) = 855KB\n\u002F\u002F Bundle depois: shell(300KB) + checkout(80KB) + catalog(75KB) = 455KB\n\u002F\u002F Redução de ~47% no total transferido\n",{"type":121,"attrs":512,"content":514},{"id":513},"quote_c2admssb",[515],{"type":76,"attrs":516,"content":518},{"id":517},"p_zm4xbq54",[519,523,525,529,531,535],{"text":520,"type":82,"marks":521},"✅ Nx bundle analysis integrada",[522],{"type":101},{"text":524,"type":82}," Rode ",{"text":526,"type":82,"marks":527},"nx build checkout --analyze",[528],{"type":175},{"text":530,"type":82}," para abrir o Webpack Bundle Analyzer e identificar quais pacotes estão sendo duplicados entre o shell e os remotes. ",{"text":532,"type":82,"marks":533},"Faça essa análise antes do primeiro deploy em produção",[534],{"type":101},{"text":536,"type":82}," — é muito mais difícil corrigir depois que o cache do CDN está propagado.",{"type":84},{"type":86,"attrs":539,"content":541},{"id":540,"level":89},"h_uacsphrn",[542],{"text":543,"type":82},"Quando microfrontends não são a resposta",{"type":545,"attrs":546,"content":548},"table",{"id":547},"tbl_piygdh16",[549,581,611,640,669,698,727],{"type":550,"content":551},"tableRow",[552,563,572],{"type":553,"attrs":554,"content":556},"tableHeader",{"align":9,"colspan":555,"rowspan":555,"colwidth":9},1,[557],{"type":76,"attrs":558,"content":560},{"id":559},"p_qaufhhjh",[561],{"text":562,"type":82},"Critério",{"type":553,"attrs":564,"content":565},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[566],{"type":76,"attrs":567,"content":569},{"id":568},"p_3zodj07o",[570],{"text":571,"type":82},"Microfrontends",{"type":553,"attrs":573,"content":574},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[575],{"type":76,"attrs":576,"content":578},{"id":577},"p_2i0oz5ei",[579],{"text":580,"type":82},"Monolito modular com Nx",{"type":550,"content":582},[583,593,602],{"type":584,"attrs":585,"content":586},"tableCell",{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[587],{"type":76,"attrs":588,"content":590},{"id":589},"p_3niyoqqy",[591],{"text":592,"type":82},"Tamanho do time",{"type":584,"attrs":594,"content":595},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[596],{"type":76,"attrs":597,"content":599},{"id":598},"p_vlouaufl",[600],{"text":601,"type":82},"✅ 5+ times paralelos",{"type":584,"attrs":603,"content":604},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[605],{"type":76,"attrs":606,"content":608},{"id":607},"p_047zd1hx",[609],{"text":610,"type":82},"✅ 1-3 times — custo de MFE não compensa",{"type":550,"content":612},[613,622,631],{"type":584,"attrs":614,"content":615},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[616],{"type":76,"attrs":617,"content":619},{"id":618},"p_7wl2sdm3",[620],{"text":621,"type":82},"Cadência de deploy",{"type":584,"attrs":623,"content":624},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[625],{"type":76,"attrs":626,"content":628},{"id":627},"p_w50pt1a0",[629],{"text":630,"type":82},"✅ Times com cadências diferentes",{"type":584,"attrs":632,"content":633},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[634],{"type":76,"attrs":635,"content":637},{"id":636},"p_lqjq2dzx",[638],{"text":639,"type":82},"✅ Mesma cadência — deploy unificado é mais simples",{"type":550,"content":641},[642,651,660],{"type":584,"attrs":643,"content":644},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[645],{"type":76,"attrs":646,"content":648},{"id":647},"p_nwtnujn7",[649],{"text":650,"type":82},"Domínios de negócio",{"type":584,"attrs":652,"content":653},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[654],{"type":76,"attrs":655,"content":657},{"id":656},"p_l5r2iyrp",[658],{"text":659,"type":82},"✅ Domínios genuinamente independentes",{"type":584,"attrs":661,"content":662},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[663],{"type":76,"attrs":664,"content":666},{"id":665},"p_ikpxq0gd",[667],{"text":668,"type":82},"❌ Muita interdependência — MFE cria fronteiras artificiais",{"type":550,"content":670},[671,680,689],{"type":584,"attrs":672,"content":673},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[674],{"type":76,"attrs":675,"content":677},{"id":676},"p_r82n7jsq",[678],{"text":679,"type":82},"Bundle inicial",{"type":584,"attrs":681,"content":682},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[683],{"type":76,"attrs":684,"content":686},{"id":685},"p_lgkbwf9z",[687],{"text":688,"type":82},"❌ Maior — overhead de Module Federation",{"type":584,"attrs":690,"content":691},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[692],{"type":76,"attrs":693,"content":695},{"id":694},"p_cnn0qhs7",[696],{"text":697,"type":82},"✅ Menor",{"type":550,"content":699},[700,709,718],{"type":584,"attrs":701,"content":702},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[703],{"type":76,"attrs":704,"content":706},{"id":705},"p_ba31763f",[707],{"text":708,"type":82},"Complexidade de config",{"type":584,"attrs":710,"content":711},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[712],{"type":76,"attrs":713,"content":715},{"id":714},"p_91hdyega",[716],{"text":717,"type":82},"❌ Alta — versões, CSS, estado, DX",{"type":584,"attrs":719,"content":720},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[721],{"type":76,"attrs":722,"content":724},{"id":723},"p_nx9kdp95",[725],{"text":726,"type":82},"✅ Baixa",{"type":550,"content":728},[729,738,747],{"type":584,"attrs":730,"content":731},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[732],{"type":76,"attrs":733,"content":735},{"id":734},"p_6sp1v492",[736],{"text":737,"type":82},"DX local",{"type":584,"attrs":739,"content":740},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[741],{"type":76,"attrs":742,"content":744},{"id":743},"p_v35je3u8",[745],{"text":746,"type":82},"⚠️ Degradada sem configuração cuidadosa",{"type":584,"attrs":748,"content":749},{"align":9,"colspan":555,"rowspan":555,"colwidth":9},[750],{"type":76,"attrs":751,"content":753},{"id":752},"p_h58e4h1i",[754,756],{"text":755,"type":82},"✅ Simples — ",{"text":757,"type":82,"marks":758},"ng serve",[759],{"type":175},{"type":121,"attrs":761,"content":763},{"id":762},"quote_om76dzss",[764],{"type":76,"attrs":765,"content":767},{"id":766},"p_7j0ppo4o",[768,772,774,778],{"text":769,"type":82,"marks":770},"→ A recomendação do Nx",[771],{"type":101},{"text":773,"type":82}," A documentação oficial do Nx é direta: ",{"text":775,"type":82,"marks":776},"\"Se você quer otimizar builds e não precisa de deploys independentes, use nosso guia de Faster Builds com Module Federation.\"",[777],{"type":101},{"text":779,"type":82}," Você pode ter builds incrementais, cache inteligente e repositório único sem a complexidade de remotes deployados independentemente. Essa é a resposta certa para a maioria dos times de até 30 pessoas.",{"type":86,"attrs":781,"content":783},{"id":782,"level":258},"h_dhp1xxts",[784],{"text":785,"type":82},"O checklist antes de adotar microfrontends",{"type":787,"attrs":788,"content":791},"bulletList",{"id":789,"tight":790},"ul_ossnjo8n",true,[792,809,824,839,854,869,885,900,916],{"type":793,"attrs":794,"content":796},"listItem",{"id":795},"li_hxk4sxtu",[797],{"type":76,"attrs":798,"content":800},{"id":799},"p_5u2girs9",[801,803,807],{"text":802,"type":82},"✅ ",{"text":804,"type":82,"marks":805},"5+ times",[806],{"type":101},{"text":808,"type":82}," que precisam deployar com cadências genuinamente diferentes",{"type":793,"attrs":810,"content":812},{"id":811},"li_ifi9pvkw",[813],{"type":76,"attrs":814,"content":816},{"id":815},"p_9lrupgzq",[817,818,822],{"text":802,"type":82},{"text":819,"type":82,"marks":820},"Domínios de negócio claros",[821],{"type":101},{"text":823,"type":82}," que não compartilham estado além de autenticação",{"type":793,"attrs":825,"content":827},{"id":826},"li_ete3pu6z",[828],{"type":76,"attrs":829,"content":831},{"id":830},"p_papg042s",[832,833,837],{"text":802,"type":82},{"text":834,"type":82,"marks":835},"SLAs independentes",[836],{"type":101},{"text":838,"type":82}," — uma falha no checkout não deve afetar o catalog",{"type":793,"attrs":840,"content":842},{"id":841},"li_k7xxbgu3",[843],{"type":76,"attrs":844,"content":846},{"id":845},"p_xdt899a8",[847,848,852],{"text":802,"type":82},{"text":849,"type":82,"marks":850},"Design system estabelecido",[851],{"type":101},{"text":853,"type":82}," via CSS Custom Properties antes de começar",{"type":793,"attrs":855,"content":857},{"id":856},"li_6kcrz6ev",[858],{"type":76,"attrs":859,"content":861},{"id":860},"p_6l1mhckt",[862,863,867],{"text":802,"type":82},{"text":864,"type":82,"marks":865},"Governança de versões",[866],{"type":101},{"text":868,"type":82}," — política clara para upgrades do Angular",{"type":793,"attrs":870,"content":872},{"id":871},"li_twg74o3j",[873],{"type":76,"attrs":874,"content":876},{"id":875},"p_qpeyylvt",[877,879,883],{"text":878,"type":82},"❌ ",{"text":880,"type":82,"marks":881},"Time único",[882],{"type":101},{"text":884,"type":82}," que \"vai crescer\" — antecipe com módulos lazy, não com MFE",{"type":793,"attrs":886,"content":888},{"id":887},"li_13rbkc8c",[889],{"type":76,"attrs":890,"content":892},{"id":891},"p_o6x8vmba",[893,894,898],{"text":878,"type":82},{"text":895,"type":82,"marks":896},"Complexidade técnica",[897],{"type":101},{"text":899,"type":82}," como objetivo — MFE é para problemas organizacionais",{"type":793,"attrs":901,"content":903},{"id":902},"li_72aqvg5n",[904],{"type":76,"attrs":905,"content":907},{"id":906},"p_2f1958ol",[908,910,914],{"text":909,"type":82},"⚠️ ",{"text":911,"type":82,"marks":912},"Estado compartilhado extenso",[913],{"type":101},{"text":915,"type":82}," entre os remotes — redesenhe os limites antes",{"type":793,"attrs":917,"content":919},{"id":918},"li_1q4fye3y",[920],{"type":76,"attrs":921,"content":923},{"id":922},"p_i0b9d1jz",[924,925,929],{"text":909,"type":82},{"text":926,"type":82,"marks":927},"SEO crítico",[928],{"type":101},{"text":930,"type":82}," — MFEs com Module Federation são CSR por padrão",{"type":84},{"type":86,"attrs":933,"content":935},{"id":934,"level":89},"h_06b4zzxy",[936],{"text":937,"type":82},"Setup correto do zero",{"type":76,"attrs":939,"content":941},{"id":940},"p_q3f8vkua",[942],{"text":943,"type":82},"Cada passo abaixo mitiga um risco real de produção. Pular um não gera erro imediato — gera o problema que você vai debugar em produção 6 meses depois.",{"type":76,"attrs":945,"content":947},{"id":946},"p_8xlhuanz",[948],{"text":949,"type":82,"marks":950},"Passo 1 — Criar o workspace Nx com preset Angular:",[951],{"type":101},{"type":269,"attrs":953,"content":956},{"id":954,"language":286,"highlighted":955},"code_dyavdnlq","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> create-nx-workspace@latest minha-org --preset=angular-monorepo\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[957],{"text":958,"type":82},"npx create-nx-workspace@latest minha-org --preset=angular-monorepo\n",{"type":76,"attrs":960,"content":962},{"id":961},"p_2lvtaav7",[963,967,969,973],{"text":964,"type":82,"marks":965},"Risco mitigado:",[966],{"type":101},{"text":968,"type":82}," sem o preset correto, o workspace não configura o ",{"text":970,"type":82,"marks":971},"@nx\u002Fenforce-module-boundaries",[972],{"type":175},{"text":974,"type":82}," automaticamente. Sem essa regra de lint, remotes vão importar uns dos outros diretamente — criando acoplamento que torna o deploy independente impossível. Você só vai descobrir o problema quando tentar deployar o checkout sem o catalog e o build quebrar.",{"type":84},{"type":76,"attrs":977,"content":979},{"id":978},"p_0cme1qau",[980],{"text":981,"type":82,"marks":982},"Passo 2 — Gerar o shell com Dynamic Module Federation:",[983],{"type":101},{"type":269,"attrs":985,"content":988},{"id":986,"language":286,"highlighted":987},"code_6ettpzs9","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> g @nx\u002Fangular:host shell --remotes=checkout,catalog,admin --dynamic=true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[989],{"text":990,"type":82},"nx g @nx\u002Fangular:host shell --remotes=checkout,catalog,admin --dynamic=true\n",{"type":76,"attrs":992,"content":994},{"id":993},"p_3wyp9hk4",[995,998,1000,1004],{"text":964,"type":82,"marks":996},[997],{"type":101},{"text":999,"type":82}," sem ",{"text":1001,"type":82,"marks":1002},"--dynamic=true",[1003],{"type":175},{"text":1005,"type":82},", a URL de cada remote fica hardcoded no bundle do shell em tempo de build. Mudar a URL de um remote em produção exige rebuild e redeploy do shell inteiro — destruindo a independência de deploy. Com o manifest JSON dinâmico, você muda a URL em runtime sem tocar no shell.",{"type":84},{"type":76,"attrs":1008,"content":1010},{"id":1009},"p_r1g3pg48",[1011],{"text":1012,"type":82,"marks":1013},"Passo 3 — Criar as libs compartilhadas antes de qualquer feature:",[1014],{"type":101},{"type":269,"attrs":1016,"content":1019},{"id":1017,"language":286,"highlighted":1018},"code_pbkc32br","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> g @nx\u002Fangular:lib libs\u002Fui\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> g @nx\u002Fangular:lib libs\u002Fauth\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> g @nx\u002Fangular:lib libs\u002Fcore\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1020],{"text":1021,"type":82},"nx g @nx\u002Fangular:lib libs\u002Fui\nnx g @nx\u002Fangular:lib libs\u002Fauth\nnx g @nx\u002Fangular:lib libs\u002Fcore\n",{"type":76,"attrs":1023,"content":1025},{"id":1024},"p_tawaz93j",[1026,1029],{"text":964,"type":82,"marks":1027},[1028],{"type":101},{"text":1030,"type":82}," criar libs depois que os remotes já existem significa que cada remote já tem sua própria versão de componentes e serviços. Unificar depois é uma refatoração dolorosa que os times resistem por meses. Criar antes força a disciplina de \"código compartilhado vai para libs\" desde o primeiro commit — o acoplamento nunca existe para ser removido.",{"type":84},{"type":76,"attrs":1033,"content":1035},{"id":1034},"p_kh23xu2x",[1036,1040,1044],{"text":1037,"type":82,"marks":1038},"Passo 4 — Configurar a base de shared config em ",[1039],{"type":101},{"text":1041,"type":82,"marks":1042},"libs\u002Fshared-mf-config",[1043],{"type":175},{"text":1045,"type":82,"marks":1046},":",[1047],{"type":101},{"type":269,"attrs":1049,"content":1052},{"id":1050,"language":56,"highlighted":1051},"code_luolt9av","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1053],{"text":1054,"type":82},"\u002F\u002F shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' })\n",{"type":76,"attrs":1056,"content":1058},{"id":1057},"p_d8b7rd7b",[1059,1062,1064,1067],{"text":964,"type":82,"marks":1060},[1061],{"type":101},{"text":1063,"type":82}," sem uma config base centralizada, cada remote define seu próprio ",{"text":231,"type":82,"marks":1065},[1066],{"type":175},{"text":1068,"type":82}," — e invariavelmente alguém esquece de incluir as entradas secundárias do Angular Material ou do CDK. O resultado é o Problema 05: bundle 3x maior. Com a config base no monorepo, um único PR corrige todos os remotes ao mesmo tempo.",{"type":84},{"type":76,"attrs":1071,"content":1073},{"id":1072},"p_y4dnjaka",[1074,1078,1080,1084,1086,1090],{"text":1075,"type":82,"marks":1076},"Passo 5 — Estabelecer o Design System no shell antes do primeiro remote:",[1077],{"type":101},{"text":1079,"type":82}," Defina todas as CSS Custom Properties em ",{"text":1081,"type":82,"marks":1082},"shell\u002Fsrc\u002Fstyles.scss",[1083],{"type":175},{"text":1085,"type":82}," e documente a convenção de namespace (ex: ",{"text":1087,"type":82,"marks":1088},".checkout-mfe { ... }",[1089],{"type":175},{"text":1091,"type":82},").",{"type":76,"attrs":1093,"content":1095},{"id":1094},"p_rztrnxf7",[1096,1099],{"text":964,"type":82,"marks":1097},[1098],{"type":101},{"text":1100,"type":82}," sem tokens CSS centralizados, cada remote define seus próprios valores de cor, espaçamento e z-index. Em 3 meses você tem 4 sistemas de design divergentes e CSS leaking não determinístico (Problema 02). Refatorar isso depois significa convencer 4 times a parar de entregar features para alinhar variáveis CSS — conversa que nunca acontece.",{"type":84},{"type":76,"attrs":1103,"content":1105},{"id":1104},"p_g47l5l6j",[1106,1110,1111,1115,1117,1121],{"text":1107,"type":82,"marks":1108},"Passo 6 — Implementar o EventBusService antes do primeiro fluxo cross-remote:",[1109],{"type":101},{"text":358,"type":82},{"text":1112,"type":82,"marks":1113},"libs\u002Fcore\u002Fsrc\u002Flib\u002Fevent-bus.service.ts",[1114],{"type":175},{"text":1116,"type":82}," com tipos de evento em ",{"text":1118,"type":82,"marks":1119},"libs\u002Fcore\u002Fsrc\u002Flib\u002Fevents.ts",[1120],{"type":175},{"text":1122,"type":82},".",{"type":76,"attrs":1124,"content":1126},{"id":1125},"p_rvqn47mq",[1127,1130],{"text":964,"type":82,"marks":1128},[1129],{"type":101},{"text":1131,"type":82}," sem um contrato de comunicação estabelecido, o primeiro dev que precisar passar dados entre remotes vai colocar estado no NgRx global — criando o Problema 03. O EventBus força a equipe a pensar em contratos versionados antes de criar a dependência de estado. É muito mais fácil estabelecer o padrão certo antes do primeiro fluxo do que remover estado global depois de 3 times dependerem dele.",{"type":84},{"type":269,"attrs":1134,"content":1137},{"id":1135,"language":286,"highlighted":1136},"code_ldd5w032","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># Estrutura de workspace que aguenta 2 anos de produção\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">minha-org\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">├──\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> apps\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">│\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   ├── shell\u002F              # Host — roteamento e layout global\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">│\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   ├── checkout-mfe\u002F       # Remote — domínio de pagamento\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">│\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   ├── catalog-mfe\u002F        # Remote — domínio de catálogo\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">│\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   └── admin-mfe\u002F          # Remote — domínio administrativo\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">├──\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> libs\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">│\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   ├── ui\u002F                 # Design System — components, tokens CSS\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">│\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   ├── auth\u002F               # AuthGuard, AuthContext, EventBus types\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">│\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   ├── core\u002F               # EventBus, interceptors, error handler\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">│\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   ├── shared-mf-config\u002F   # Base config de Module Federation\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">│\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   └── data-access\u002F        # APIs compartilhadas (opcional)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">├──\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> module-federation.manifest.json          # dev\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">├──\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> module-federation.manifest.staging.json  # staging\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">├──\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> module-federation.manifest.prod.json     # produção\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">└──\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> nx.json\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1138],{"text":1139,"type":82},"# Estrutura de workspace que aguenta 2 anos de produção\nminha-org\u002F\n├── apps\u002F\n│   ├── shell\u002F              # Host — roteamento e layout global\n│   ├── checkout-mfe\u002F       # Remote — domínio de pagamento\n│   ├── catalog-mfe\u002F        # Remote — domínio de catálogo\n│   └── admin-mfe\u002F          # Remote — domínio administrativo\n├── libs\u002F\n│   ├── ui\u002F                 # Design System — components, tokens CSS\n│   ├── auth\u002F               # AuthGuard, AuthContext, EventBus types\n│   ├── core\u002F               # EventBus, interceptors, error handler\n│   ├── shared-mf-config\u002F   # Base config de Module Federation\n│   └── data-access\u002F        # APIs compartilhadas (opcional)\n├── module-federation.manifest.json          # dev\n├── module-federation.manifest.staging.json  # staging\n├── module-federation.manifest.prod.json     # produção\n└── nx.json\n",{"type":84},{"type":86,"attrs":1142,"content":1144},{"id":1143,"level":89},"h_36ap224p",[1145],{"text":1146,"type":82},"O que realmente importa",{"type":76,"attrs":1148,"content":1150},{"id":1149},"p_5svsyvbu",[1151,1153],{"text":1152,"type":82},"O Module Federation resolve problemas técnicos de carregamento federado. O Nx resolve problemas técnicos de build e dependência. Nenhum dos dois resolve o problema real: ",{"text":1154,"type":82,"marks":1155},"microfrontends são uma solução para o Conway's Law, não para performance de build.",[1156],{"type":101},{"type":1158,"attrs":1159,"content":1163},"callout",{"id":1160,"type":1161,"title":1162},"call_shbxdqi4","note","Entenda o papel do Module Federation e do Nx",[1164,1170,1176],{"type":76,"attrs":1165,"content":1167},{"id":1166},"p_wqclpea6",[1168],{"text":1169,"type":82},"Module Federation foca no carregamento federado, enquanto Nx gerencia build e dependências. Nenhuma ferramenta resolve a complexidade intrínseca dos microfrontends.",{"type":76,"attrs":1171,"content":1173},{"id":1172},"p_9l4ps16e",[1174],{"text":1175,"type":82},"Microfrontends são eficazes para equipes que precisam trabalhar de forma independente, desde que os domínios de negócio estejam bem definidos.",{"type":76,"attrs":1177,"content":1179},{"id":1178},"p_h0t1sn6w",[1180],{"text":1181,"type":82},"Sem essa clareza, o projeto sofre com a complexidade distribuída e o acoplamento típico de monolitos, prejudicando o resultado final.",{"type":76,"attrs":1183,"content":1185},{"id":1184},"p_9fcnorso",[1186],{"text":1187,"type":82},"Se o seu problema é que dois times não conseguem trabalhar no mesmo código sem pisar um no outro, microfrontends podem ajudar — mas apenas se os domínios de negócio tiverem fronteiras claras o suficiente para que os remotes sejam genuinamente independentes.",{"type":76,"attrs":1189,"content":1191},{"id":1190},"p_alu9taji",[1192],{"text":1193,"type":82},"A maioria dos projetos que adota microfrontends sem essa clareza de domínio acaba com o pior dos dois mundos: a complexidade da arquitetura distribuída com o acoplamento do monolito.",{"type":121,"attrs":1195,"content":1197},{"id":1196},"quote_w93dlfca",[1198],{"type":76,"attrs":1199,"content":1201},{"id":1200},"p_x1smvs47",[1202,1206,1207,1211],{"text":1203,"type":82,"marks":1204},"A política em uma frase",[1205],{"type":101},{"text":358,"type":82},{"text":1208,"type":82,"marks":1209},"Microfrontends são para times, não para código.",[1210],{"type":101},{"text":1212,"type":82}," Se o driver é \"precisamos que times diferentes deployem com cadências diferentes em domínios de negócio claros\" — use MFE. Se o driver é \"nossa aplicação ficou grande\" — use módulos lazy do Angular com Nx incremental builds. A segunda opção resolve 80% dos problemas com 20% da complexidade.",{"type":76,"attrs":1214},{"id":1215},"p_vgu1iuga",{"type":76,"attrs":1217,"content":1219},{"id":1218},"p_r2pb4ptj",[1220],{"text":1221,"type":82,"marks":1222},"A independência que os microfrontends prometem custa mais do que o tutorial mostra. Só vale pagar quando você sabe exatamente o que está comprando.",[1223],{"type":101},{"type":84},{"type":86,"attrs":1226,"content":1228},{"id":1227,"level":89},"h_xpj2jrgc",[1229],{"text":1230,"type":82},"Fontes",{"type":787,"attrs":1232,"content":1234},{"id":1233,"tight":790},"ul_ebfhb9re",[1235,1249,1274,1288,1309,1326],{"type":793,"attrs":1236,"content":1238},{"id":1237},"li_tou1g94b",[1239],{"type":76,"attrs":1240,"content":1242},{"id":1241},"p_dsc5i1i1",[1243,1247],{"text":1244,"type":82,"marks":1245},"nx.dev\u002Fdocs\u002Ftechnologies\u002Fmodule-federation",[1246],{"type":101},{"text":1248,"type":82}," — Arquitetura oficial de MFE com Nx: quando usar, version mismatch, deploys afetados, estratégia de shared libs.",{"type":793,"attrs":1250,"content":1252},{"id":1251},"li_4b6pv4ry",[1253],{"type":76,"attrs":1254,"content":1256},{"id":1255},"p_qlornqzv",[1257,1268,1272],{"text":1258,"type":82,"marks":1259},"blog.angular.dev",[1260,1267],{"type":1261,"attrs":1262},"link",{"rel":1263,"href":1264,"class":1265,"title":9,"target":1266},"noopener noreferrer","http:\u002F\u002Fblog.angular.dev","editor-link","_blank",{"type":101},{"text":1269,"type":82,"marks":1270}," — Manfred Steyer (fev\u002F2025)",[1271],{"type":101},{"text":1273,"type":82}," — \"Micro Frontends with Angular and Native Federation\" — Module Federation vs Native Federation, singleton sharing, strictVersion, ESM + import maps.",{"type":793,"attrs":1275,"content":1277},{"id":1276},"li_d0jicak3",[1278],{"type":76,"attrs":1279,"content":1281},{"id":1280},"p_3aadqt6x",[1282,1286],{"text":1283,"type":82,"marks":1284},"DEV Community — Vitalii Petrenko (mai\u002F2025)",[1285],{"type":101},{"text":1287,"type":82}," — \"Microfrontends in 2025: A Reality Check from the Trenches\" — CSS isolation, state management cross-MFE, version governance.",{"type":793,"attrs":1289,"content":1291},{"id":1290},"li_ui152w7z",[1292],{"type":76,"attrs":1293,"content":1295},{"id":1294},"p_wqv735v4",[1296,1303,1307],{"text":1297,"type":82,"marks":1298},"infinum.com",[1299,1302],{"type":1261,"attrs":1300},{"rel":1263,"href":1301,"class":1265,"title":9,"target":1266},"http:\u002F\u002Finfinum.com",{"type":101},{"text":1304,"type":82,"marks":1305}," (dez\u002F2025)",[1306],{"type":101},{"text":1308,"type":82}," — \"Implementing Micro Frontends — What to Look Out For\" — shared packages, atualização de Angular em monorepo.",{"type":793,"attrs":1310,"content":1312},{"id":1311},"li_b78thtya",[1313],{"type":76,"attrs":1314,"content":1316},{"id":1315},"p_vatwkxhy",[1317,1324],{"text":1318,"type":82,"marks":1319},"angulararchitects.io",[1320,1323],{"type":1261,"attrs":1321},{"rel":1263,"href":1322,"class":1265,"title":9,"target":1266},"http:\u002F\u002Fangulararchitects.io",{"type":101},{"text":1325,"type":82}," — \"Multi-Framework and -Version Micro Frontends with Module Federation\" — requiredVersion strategies, bootstrap assíncrono.",{"type":793,"attrs":1327,"content":1329},{"id":1328},"li_jdfw2aa9",[1330],{"type":76,"attrs":1331,"content":1333},{"id":1332},"p_gun7pnwc",[1334,1341,1345],{"text":1335,"type":82,"marks":1336},"javascript-conference.com",[1337,1340],{"type":1261,"attrs":1338},{"rel":1263,"href":1339,"class":1265,"title":9,"target":1266},"http:\u002F\u002Fjavascript-conference.com",{"type":101},{"text":1342,"type":82,"marks":1343}," (jul\u002F2024)",[1344],{"type":101},{"text":1346,"type":82}," — \"Microfrontends in the Monorepo\" — nx affected:apps para deploy seletivo, enforce-module-boundaries.",{"type":76,"attrs":1348},{"id":1349},"p_xchkbeqj","Angular Microfrontends com Nx: 5 problemas reais de produção e como resolver","Version mismatch, CSS vazando entre remotes, estado compartilhado que destrói o deploy independente, DX quebrada e bundle 3x maior que o monolito. Problemas reais, soluções reais.","2026-08-24T14:53:53.315534+00:00",[1354,1369,1389,1404],{"id":1355,"slug":1356,"title":1357,"excerpt":1358,"image":1359,"featured":44,"groupId":1360,"publishedAt":1361,"readingTime":1362,"views":1363,"author":1364,"category":1365,"tags":1366},"bf825d04-3586-4b66-8427-6afc5ceaad98","astro-arquitetura-de-ilhas-performance-e-onde-o-framework-realmente-se-encaixa","Astro: Arquitetura de Ilhas, Performance e Onde o Framework Realmente Se Encaixa","O Astro desafia o status quo dos frameworks modernos ao priorizar HTML estático e isolar a interatividade em ilhas de código independentes.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785718482980-featured-6cgkhm.webp","cb62459e-7ace-43d3-a545-661c5695e925","2026-08-03T00:54:54.243681+00:00",41,83,{"name":49,"avatar":9},{"slug":13,"name":14,"color":15},[1367,1368],{"slug":59,"name":60},{"slug":56,"name":57},{"id":1370,"slug":1371,"title":1372,"excerpt":1373,"image":1374,"featured":44,"groupId":1375,"publishedAt":1376,"readingTime":1377,"views":1378,"author":1379,"category":1380,"tags":1381},"35711043-fe0c-4384-b945-8d508216d7bf","next-js-16-ppr-elimine-o-tradeoff-entre-estatico-e-dinamico-e-alcance-edge-ttfb","Next.js 16 PPR: Elimine o tradeoff entre estático e dinâmico e alcance Edge TTFB com dados atualizados","O Partial Prerendering no Next.js 16 resolve o clássico tradeoff de renderização, entregando velocidade estática com dados dinâmicos em uma resposta.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1783970715281-featured-ikveub.webp","4982f454-7d33-4921-a2b5-c1c663505594","2026-07-18T15:42:27.839+00:00",15,14,{"name":49,"avatar":9},{"slug":13,"name":14,"color":15},[1382,1385,1388],{"slug":1383,"name":1384},"nextjs","Next.js",{"slug":1386,"name":1387},"react","React",{"slug":56,"name":57},{"id":1390,"slug":1391,"title":1392,"excerpt":1393,"image":1394,"featured":44,"groupId":1395,"publishedAt":1396,"readingTime":1397,"views":258,"author":1398,"category":1399,"tags":1400},"ae0fd7b3-4473-4f05-b7d0-2972cda8e899","pare-de-arriscar-seu-frontend-a-arquitetura-definitiva-do-angular-22","Pare de arriscar seu frontend: a arquitetura definitiva do Angular 22","O Angular 22 chegou. Descubra como as mudanças arquiteturais e os novos primitivos de reatividade o tornam a escolha ideal para sistemas enterprise.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1783664697703-featured-bp1wut.webp","9baf202d-f92f-4667-a3a3-8090369c1c0b","2026-07-11T00:36:51.027764+00:00",18,{"name":49,"avatar":9},{"slug":13,"name":14,"color":15},[1401,1402,1403],{"slug":53,"name":54},{"slug":59,"name":60},{"slug":1383,"name":1384},{"id":1405,"slug":1406,"title":1407,"excerpt":1408,"image":1409,"featured":44,"groupId":1410,"publishedAt":1411,"readingTime":10,"views":1412,"author":1413,"category":1414,"tags":1415},"5cbd9942-0deb-4886-9a7b-de4ff8807109","solidjs-em-2026-por-que-a-reatividade-fina-esta-superando-o-virtual-dom","SolidJS em 2026: Por que a reatividade fina está superando o Virtual DOM","Sem Virtual DOM e com reatividade fina, o SolidJS redefine o desenvolvimento frontend em 2026 com performance superior e componentes otimizados..","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1782323510914-featured-xegn0n.webp","89a516d2-a66f-4df4-90c5-f1d201806688","2026-06-24T17:52:33.862065+00:00",0,{"name":49,"avatar":9},{"slug":13,"name":14,"color":15},[1416,1419,1422,1423],{"slug":1417,"name":1418},"developer-tools","Developer Tools",{"slug":1420,"name":1421},"nodejs","Node.js",{"slug":56,"name":57},{"slug":59,"name":60},{"es":1425,"pt":40,"en":1426},"microfrontends-con-angular-y-nx-lo-que-nadie-cuenta","microfrontends-with-angular-and-nx-what-nobody-tells-you"]