Angular's Future without NgModules: Architectures with Standalone Components @ngConf

Free eBook on this:
https://www.angulararchitects.io/en/book

Transcript

1. @ManfredSteyer Angular's Future without NgModules: Architectures with Standalone Components
2. @ManfredSteyer
3. @ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ HomeComponent, AboutComponent, HttpClientModule, ], templateUrl: '…' }) export class AppComponent { […] }
4. @ManfredSteyer
5. @ManfredSteyer Agenda #1 Routing & Lazy Loading #2 Structuring Applications
6. @ManfredSteyer Manfred Steyer
7. @ManfredSteyer
8. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ […] ] });
9. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(HttpClientModule), importProvidersFrom(RouterModule.forRoot(APP_ROUTES)), ] });
10. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(HttpClientModule), provideRouter(APP_ROUTES, withPreloading(PreloadAllModules), withDebugTracing(), ), ] });
11. @ManfredSteyer export const APP_ROUTES: Routes = [ […], { path: 'flight-booking', loadChildren: () => import('@nx-example/booking/feature-book') .then(m => m.FLIGHT_BOOKING_ROUTES) }, […] ];
12. @ManfredSteyer export const APP_ROUTES: Routes = [ […], { path: 'flight-booking', loadChildren: () => import('@nx-example/booking/feature-book') .then(m => m.FLIGHT_BOOKING_ROUTES) }, […] ];
13. @ManfredSteyer export const APP_ROUTES: Routes = [ […], { path: 'flight-booking', loadChildren: () => import('@nx-example/booking/feature-book') .then(m => m.FLIGHT_BOOKING_ROUTES) }, { path: 'next-flight', loadComponent: () => import('@nx-example/booking/feature-tickets') .then(m => m.NextFlightComponent) }, ];
14. @ManfredSteyer export const FLIGHT_BOOKING_ROUTES: Routes = [{ path: '', component: FlightBookingComponent, providers: [ MyService ], children: [ […] ] }];
15. @ManfredSteyer export const FLIGHT_BOOKING_ROUTES: Routes = [{ path: '', component: FlightBookingComponent, providers: [ MyService ], children: [ […] ] }]; Scope: This route + all child routes (Lazily) loaded with route config
16. @ManfredSteyer export const FLIGHT_BOOKING_ROUTES: Routes = [{ path: '', component: FlightBookingComponent, providers: [ provideState(bookingFeature), provideEffects([BookingEffects]) ], children: [ […] ] }];
17. @ManfredSteyer
18. @ManfredSteyer
19. @ManfredSteyer
20. @ManfredSteyer // index.ts == Public API export * from './flight-booking.routes';
21. @ManfredSteyer
22. @ManfredSteyer
23. @ManfredSteyer + Generates path mappings + Generates initial barrel + Prevents bypassing index.ts + Restricting access between libraries
24. @ManfredSteyer
25. @ManfredSteyer
26. @ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
27. @ManfredSteyer provideRouter & withXYZ Directly point to lazy router configs Folders & Barrels Nx, Libs, and Constraints FTW!
28. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io