Micro Frontends with Angular

The course Micro Frontends with Angular from SpiralTrain teaches you how to design and implement scalable frontend architectures using Angular.

Introduction

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.

Angular Recap

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.

Architecture

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.

Module Federation

Here participants learn to work with Webpack Module Federation, including host and remote applications, dynamic imports, shared libraries, and best practices for runtime integration.

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

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

Deployment strategies are discussed with attention to CI/CD pipelines, independent deployments, containerization with Docker, and hosting options in Kubernetes and the cloud.

Testing

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.

Advanced Topics

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.

Audience Course Micro Frontends with Angular

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.

Prerequisites Course Micro Frontends with Angular

Participants should have a good understanding of JavaScript, TypeScript, and Angular development. Familiarity with web components, modular architectures, and build tools is helpful.

Realization Training Micro Frontends with Angular

The course combines theoretical sessions with hands-on labs guided by an expert trainer. Real-world case studies are central to the training experience.

Micro Frontends with Angular Certificate

After completion, participants receive a certificate of participation in Micro Frontends with Angular.

Modules

Module 1 : Introduction

• 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

Module 2 : Angular Recap

• Angular Fundamentals
• TypeScript Essentials
• Components and Templates
• Services and Dependency
• Angular CLI
• Modules and Imports
• Data Binding
• Directives Basics
• Routing Essentials
• Angular Change Detection

Module 3 : Architecture

• 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

• Webpack Module Federation
• Host and Remote Apps
• Dynamic Imports
• Shared Libraries
• Version Compatibility
• Exposing Components
• Runtime Integration
• Configuration Files
• Error Handling
• Best Practices

Module 5 : Integration

• Routing Integration
• UI Composition
• Shared Navigation
• Shared Services
• Cross-App Communication
• Micro Frontend Shell
• Authentication Integration
• Authorization Handling
• Performance Monitoring
• Testing Integration

Module 6 : State Management

• 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

• Deployment Strategies
• CI/CD Pipelines
• Independent Deployments
• Version Management
• Environment Configurations
• Containerization Basics
• Docker with Angular
• Kubernetes Deployments
• Cloud Hosting Options
• Rollback Strategies

Module 8 : Testing

• Unit Testing Angular
• Integration Testing
• E2E Testing Basics
• Jest with Angular
• Cypress Framework
• Contract Testing
• Test Automation
• Performance Testing
• Accessibility Testing
• Testing Best Practices

Module 9 : Advanced Topics

• Micro Frontend Security
• Authentication Patterns
• Authorization Patterns
• Error Boundary Handling
• Accessibility Concerns
• Performance Optimization
• Caching Strategies
• Future Trends
• Case Studies
• Hands-On Project