Angular without Modules - The State of Standalone Components

Slide 1

Slide 1 text

By Maina Wycliffe DevFest Rift Valley 2022 Angular without Modules - The State of Standalone Components

Slide 2

Slide 2 text

About Me Maina Wycliffe Angular GDE, Software Engineer at Flanksource, & Typescript aficionado Author of the All Things Typescript Newsletter - allthingstypescript.dev Maina Wycliffe

Slide 3

Slide 3 text

Standalone Components? Directives / Pipes / Components

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Bootstrapping a Standalone Application

Slide 6

Slide 6 text

New Standalone APIs? Angular v14.2 & 15

Slide 7

Slide 7 text

Router provideRouter(...)

Slide 8

Slide 8 text

Top Level Routes - provideRouter()

Slide 9

Slide 9 text

Available Router Features ● withDebugTracing ● withDisabledInitialNavigation ● withEnabledBlockingInitialNavigation ● withInMemoryScrolling ● withPreloading ● withRouterConﬁg

Slide 10

Slide 10 text

Lazy Loading Components - loadComponent

Slide 11

Slide 11 text

Lazy Loading Feature Routes Array - loadChildren Resolving Routes Routes Array to Load

Slide 12

Slide 12 text

Feature Routes Array - Providing Dependencies

Slide 13

Slide 13 text

HTTP Client provideHttpClient(...)

Slide 14

Slide 14 text

HTTP CLient - provideHttpClient()

Slide 15

Slide 15 text

Available HTTP Features ● withInterceptors ● withJsonpSupport ● withLegacyInterceptors ● withNoXsrfProtection ● withRequestsMadeViaParent ● withXsrfConﬁguration

Slide 16

Slide 16 text

Animations provideAnimations(...) provideNoopAnimations(...)

Slide 17

Slide 17 text

Animations

Slide 18

Slide 18 text

Compatibility with NgModules importProvidersFrom(...)

Slide 19

Slide 19 text

Compatibility with NgModules - Route Component

Slide 20

Slide 20 text

Compatibility with NgModules - Providing to a Route and its children

Slide 21

Slide 21 text

And then, there is more

Slide 22

Slide 22 text

Inject Function Functional Angular

Slide 23

Slide 23 text

Inject Function ● Decouple Angular from Classes ● An alternative to Constructor DI ● Functions in Angular

Slide 24

Slide 24 text

Inject Function – Functions

Slide 25

Slide 25 text

Inject Function – Functional Guards

Slide 26

Slide 26 text

What’s next? ● NgModules are not going anywhere ● You can use a combination of both

Slide 27

Slide 27 text

Resources ● Standalone APIs | This is Angular guides ● Advancements in the Angular Router | by Andrew Scott | Oct, 2022 ● Angular - Getting started with standalone components