Angular without Modules - The State of Standalone Components

In this talk, we will look into Angular's Standalone Components, new APIs introduced since the initial release, best practices, and third-party packages and tools state. We will dive deep into the latest APIs introduced in v14.2 and above and how to take advantage of Angular's Standalone Components.

Transcript

1. By Maina Wycliffe DevFest Rift Valley 2022 Angular without Modules - The State of Standalone Components
2. About Me Maina Wycliffe Angular GDE, Software Engineer at Flanksource, & Typescript aficionado Author of the All Things Typescript Newsletter - allthingstypescript.dev Maina Wycliffe
3. Standalone Components? Directives / Pipes / Components
5. Bootstrapping a Standalone Application
6. New Standalone APIs? Angular v14.2 & 15
7. Router provideRouter(...)
8. Top Level Routes - provideRouter()
9. Available Router Features • withDebugTracing • withDisabledInitialNavigation • withEnabledBlockingInitialNavigation • withInMemoryScrolling • withPreloading • withRouterConfig
10. Lazy Loading Components - loadComponent
11. Lazy Loading Feature Routes Array - loadChildren Resolving Routes Routes Array to Load
12. Feature Routes Array - Providing Dependencies
13. HTTP Client provideHttpClient(...)
14. HTTP CLient - provideHttpClient()
15. Available HTTP Features • withInterceptors • withJsonpSupport • withLegacyInterceptors • withNoXsrfProtection • withRequestsMadeViaParent • withXsrfConfiguration
16. Animations provideAnimations(...) provideNoopAnimations(...)
17. Animations
18. Compatibility with NgModules importProvidersFrom(...)
19. Compatibility with NgModules - Route Component
20. Compatibility with NgModules - Providing to a Route and its children
21. And then, there is more
22. Inject Function Functional Angular
23. Inject Function • Decouple Angular from Classes • An alternative to Constructor DI • Functions in Angular
24. Inject Function – Functions
25. Inject Function – Functional Guards
26. What’s next? • NgModules are not going anywhere • You can use a combination of both
27. Resources • Standalone APIs | This is Angular guides • Advancements in the Angular Router | by Andrew Scott | Oct, 2022 • Angular - Getting started with standalone components
28. Thank you! @mwycliffe_dev mainawycliffe Maina Wycliffe
29. au revoir 󰗚