-
Learning by doing
-
Trainers with practical experience
-
Classroom training
-
Detailed course material
-
Clear content description
-
Tailormade content possible
-
Training that proceeds
-
Small groups
The course Micro Frontends with Angular from SpiralTrain teaches you how to design and implement scalable frontend architectures using Angular. You will learn how to break large applications into manageable micro frontends, integrate them seamlessly, and apply techniques for independent deployment and team autonomy.
The course Micro Frontends with Angular starts with an overview of the differences between monolithic applications and micro frontends. Benefits, key principles, and real-world examples of micro frontend architectures are discussed.
Next a short recap of core Angular concepts is given, including components and templates, dependency injection, modules, routing, and change detection, as a foundation for building micro frontends.
This module covers architectural patterns and design choices such as domain-driven design, component communication, the use of an event bus, lazy loading, and versioning strategies.
Here participants learn to work with Webpack Module Federation, including host and remote applications, dynamic imports, shared libraries, and best practices for runtime integration.
This part focuses on integrating micro frontends into a complete application. Topics include routing integration, UI composition, cross-app communication, the role of a shell application, and handling authentication and authorization.
State management is addressed with an emphasis on challenges of shared state and the use of NgRx. Key topics are store setup, selectors, and reducers for consistent and maintainable state handling.
Deployment strategies are discussed with attention to CI/CD pipelines, independent deployments, containerization with Docker, and hosting options in Kubernetes and the cloud.
This module introduces essential testing approaches such as unit and integration testing, end-to-end testing with Cypress, contract testing, and automation with performance checks.
The course concludes with advanced subjects such as security and access control, error handling with error boundaries, performance optimization, and a hands-on project that ties everything together.
This course is intended for Angular developers, frontend engineers, and software architects who want to learn how to design applications using a micro frontend architecture.
Participants should have a good understanding of JavaScript, TypeScript, and Angular development. Familiarity with web components, modular architectures, and build tools is helpful.
The course combines theoretical sessions with hands-on labs guided by an expert trainer. Real-world case studies are central to the training experience.
After completion, participants receive a certificate of participation in Micro Frontends with Angular.
Module 1 : Introduction |
Module 2 : Angular Recap |
Module 3 : Architecture |
Micro Frontends Overview Monolith vs Micro Frontends Benefits and Challenges Use Cases Key Principles Architecture Styles Integration Approaches Deployment Strategies Scaling Teams Real-World Examples |
Angular Fundamentals TypeScript Essentials Components and Templates Services and Dependency Angular CLI Modules and Imports Data Binding Directives Basics Routing Essentials Angular Change Detection |
Micro Frontend Concepts Architecture Patterns Domain-Driven Design Shared vs Isolated State Component Communication Event Bus Pattern Routing Strategies Lazy Loading Versioning Strategies Resilience Patterns |
Module 4 : Module Federation |
Module 5 : Integration |
Module 6 : State Management |
Webpack Module Federation Host and Remote Apps Dynamic Imports Shared Libraries Version Compatibility Exposing Components Runtime Integration Configuration Files Error Handling Best Practices |
Routing Integration UI Composition Shared Navigation Shared Services Cross-App Communication Micro Frontend Shell Authentication Integration Authorization Handling Performance Monitoring Testing Integration |
State Management Intro Local Component State Shared State Issues NgRx Overview NgRx Store Setup Selectors and Actions Reducers and Effects Cross-App State Sharing State Synchronization State Debugging Tools |
Module 7 : Deployment |
Module 8 : Testing |
Module 9 : Advanced Topics |
Deployment Strategies CI/CD Pipelines Independent Deployments Version Management Environment Configurations Containerization Basics Docker with Angular Kubernetes Deployments Cloud Hosting Options Rollback Strategies |
Unit Testing Angular Integration Testing E2E Testing Basics Jest with Angular Cypress Framework Contract Testing Test Automation Performance Testing Accessibility Testing Testing Best Practices |
Micro Frontend Security Authentication Patterns Authorization Patterns Error Boundary Handling Accessibility Concerns Performance Optimization Caching Strategies Future Trends Case Studies Hands-On Project |