🎯 Modern Angular Application Lifecycle

graph TD A[main.ts] --> B[bootstrapApplication] B --> C[Root Standalone Component] B --> D[Application Config] D --> E[Providers Array] E --> F[provideRouter] E --> G[provideHttpClient] D --> I[Zoneless by Default Since v21] F --> J[Application Ready] G --> J I --> J C --> J

graph TD A[Constructor] --> B[Dependency Injection] B --> C[Signal Initialization] C --> D[Input Signals] D --> E[Output Signals] E --> F[Computed Signals] F --> G[Effects Setup] G --> H[ngOnInit] H --> I[afterNextRender] I --> J[afterEveryRender] J --> K[Component Running] K --> L{Signal Changes?} L -->|Yes| M[Auto Change Detection] L -->|No| N{User Events?} M --> O[Re-render] O --> K N -->|Click/Input| P[Update Signals] N -->|Destroy| Q[ngOnDestroy] P --> M Q --> R[Cleanup] R --> S[End]

graph TD A[Application Start] --> B[Zoneless Mode Active] B --> C[Signal-based Updates] C --> D[Signal Value Changes] D --> E[Mark Specific Component] E --> F[Local Change Detection] B --> G[Event-based Updates] G --> H[DOM Events] H --> I[Handler Runs and Marks View Dirty] I --> J[Update State] J --> K{Using Signals?} K -->|Yes| D K -->|No| L[Manual markForCheck] L --> M[Schedule CD] F --> N[Update DOM] M --> N N --> O[Wait for Next Change] O --> D

graph TD A[Route Navigation] --> B{Route Type?} B -->|Eager| C[Direct Component Load] B -->|Lazy| D[loadComponent Function] D --> E[Dynamic Import] E --> F{Already Loaded?} F -->|No| G[Download Bundle] F -->|Yes| H[Use Cached] G --> I[Parse Component] I --> J[Register Component] J --> K[Create Instance] H --> K C --> K K --> L[Inject Dependencies] L --> M[Initialize Signals] M --> N[Run Lifecycle] N --> O[Render Component]

graph TD A[Standalone Component] --> B{DI Method?} B -->|Constructor| C[Constructor Injection] B -->|inject Function| D[inject Function] C --> E[Still Supported, Older Style] D --> F[Recommended Approach] F --> G{Injection Context?} G -->|Constructor| H[In Constructor] G -->|Field| I[Field Initializer] G -->|Factory| J[Factory Function] H --> K[Get Service] I --> K J --> K K --> L{Service Scope?} L -->|Root| M[Singleton] L -->|Component| N[Component Scoped] L -->|Route| O[Route Scoped] M --> P[Use Service] N --> P O --> P

graph TD A[Global State Service] --> B[Signal Store] B --> C[State Signals] C --> D[signal Function] C --> E[computed Function] B --> F[State Methods] F --> G[update Method] F --> H[set Method] J[Component 1] --> K[inject Store] L[Component 2] --> M[inject Store] N[Component 3] --> O[inject Store] K --> P[Read Signals] M --> P O --> P P --> Q[Auto-track Dependencies] J --> R[Update State] R --> S[Trigger Effects] S --> T[Notify Consumers] T --> U[Update Component 2] T --> V[Update Component 3]

graph TD A[resource Function] --> B[Configuration] B --> C[loader Function] B --> D[params Function] C --> E[Async Request] E --> F{Response Status?} F -->|Success| G[Update value Signal] F -->|Error| H[Update error Signal] F -->|Loading| I[isLoading Signal] G --> J[Component Template] H --> J I --> J J --> K[Template Binding] K --> L[Display Data] D --> M[Reloads When Params Change] M --> E

graph TD A[Navigation Start] --> B[CanMatchFn] B --> C{Route Matched?} C -->|No| D[Try Next Route] C -->|Yes| E[CanDeactivateFn on Current Route] E --> F{Can Leave?} F -->|No| G[Navigation Cancelled] F -->|Yes| H[CanActivateFn] H --> I{Guard Pass?} I -->|No| G I -->|Yes| J[ResolveFn] J --> K[Load Lazy Component] K --> L[Activate Component] L --> M[Navigation End]

graph LR A[main.ts] --> B[bootstrapApplication] B --> C[App Config] B --> D[Root Component] C --> E[Global Providers] D --> F[Router Outlet] F --> G[Routes] G --> H[Components] H --> I[Signals] H --> J[Services] I --> K[State Management] J --> L[Business Logic] K --> M[UI Updates] L --> M M --> N[User Interaction] N --> O[Events] O --> I

graph TD A[Modular App] --> B[Analyze Dependencies] B --> C[Convert Components] C --> D[Run ng generate @angular/core:standalone] D --> E[Check imports arrays] E --> F[Remove NgModules] F --> G[Update main.ts] G --> H[Update Routes] H --> I[Test Application] I --> J{Issues Found?} J -->|Yes| K[Fix Imports] J -->|No| L[Migration Complete] K --> I L --> M[Benefits Achieved]