Angular Microfrontends with Native Federation (Part 1) | Setup Host & Remote Apps + Config Guide

🎥 Part 1: Build Angular Microfrontends Using Native Federation (Step-by-Step Guide) In this hands-on tutorial, we kickstart a real-world microfrontend architecture using Native Federation and Angular. In Part 1, we create two separate applications: ✅ host_app – The main shell app ✅ mfe_1 – A micro frontend (remote module) You’ll learn how to: Set up Angular CLI projects for microfrontend structure Install and configure @angular-architects/native-federation Use the command: ng generate @angular-architects/native-federation:init --project mfe1 --port 4201 --type remote Understand and configure the federation.config.js file 📦 Tools Used: Angular 17 + Native Federation by Angular Architects + ES Modules (ESM), Import Maps 🔧 Perfect for teams looking to split monolithic frontends into independently deployable apps! Connect 1:1 https://topmate.io/virtualboard Buy MicroFrontend E-Book - https://topmate.io/virtualboard/1613054 📺 Watch Part 2 here: https://www.youtube.com/@UC1_PoxsCQlTLIWNGx2eHO1A 📁 GitHub Repo: https://github.com/vishalbajpai448 👉 Like, Comment & Subscribe to stay updated with the full microfrontend series! 🔔 Subscribe for more Angular, microfrontend, and real-world dev architecture tutorials. #microfrontends #Angular #Microfrontends #NativeFederation #AngularMicrofrontend #WebArchitecture #ModuleFederation #AngularCLI #FrontendEngineering