Better Angular Architectures: Architectures with Standalone Components @DWX2022

Transcript

1. @ManfredSteyer Better Angular Architectures: Architectures with Standalone Components
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer
5. @ManfredSteyer
6. @ManfredSteyer Angular 2 BETA, Feb 2016 @Component({ selector: 'app', directives: [ROUTER_DIRECTIVES, MyComponent, NgIf, NgFor], templateUrl: 'app/app.html' }) @RouteConfig([ { path: '/', component: Home, … }, { path: '/voucher', component: Voucher, … }, ]) export class App { […] }
7. @ManfredSteyer Angular 2 RC.5, August 2016 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; […] @NgModule({ imports: [BrowserModule, OtherModule], declarations: [AppComponent, OtherComponent, OtherDirective], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
8. @ManfredSteyer Angular 2 RC.5, August 2016 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; […] @NgModule({ imports: [BrowserModule, OtherModule], declarations: [AppComponent, OtherComponent, OtherDirective], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
9. @ManfredSteyer Angular 2 RC.5, August 2016 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; […] @NgModule({ imports: [BrowserModule, OtherModule], declarations: [AppComponent, OtherComponent, OtherDirective], providers: [], bootstrap: [AppComponent], }) export class AppModule {} TypeScript Modules Angular Modules
10. @ManfredSteyer My Ivy Talk at ng-conf 2020
11. @ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ HomeComponent, AboutComponent, HttpClientModule, ], templateUrl: '…' }) export class AppComponent { […] }
12. @ManfredSteyer bootstrapApplication(AppComponent);
13. @ManfredSteyer
14. @ManfredSteyer #1 Mental Model #2 Compatibility #3 Routing #4 Architecture
15. @ManfredSteyer Manfred Steyer
16. @ManfredSteyer
17. @ManfredSteyer Standalone Component = Component + NgModule (not implemented that way!)
18. @ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ RouterModule, HomeComponent, AboutComponent, ], templateUrl: '…' }) export class AppComponent { […] } @NgModule({ imports: [ RouterModule, HomeComponentModule, AboutComponentModule, ], declares: [ AppComponent ] }) export class AppModule { … } @Component({ selector: 'app-root', templateUrl: '…' }) export class AppComponent { […] }
19. @ManfredSteyer @Pipe({ standalone: true, name: 'city', pure: true }) export class CityPipe implements PipeTransform { […] }
20. @ManfredSteyer @Directive({ standalone: true, selector: 'input[appCity]', providers: [ … ] }) export class CityValidator implements Validator { […] }
21. @ManfredSteyer @Component({ standalone: true, imports: [ […], FlightCardComponent, CityPipe, CityValidator, ], selector: 'flight-search', templateUrl: '…' }) export class FlightSearchComponent { […] }
22. @ManfredSteyer
23. @ManfredSteyer It looks like you want to use NgIfDirective and MyComponent. Shall I import it for you?
24. @ManfredSteyer
25. @ManfredSteyer
26. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […] TicketsModule, ], templateUrl: '…' }) export class AppComponent { }
27. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […] TicketsModule, ], templateUrl: '…' }) export class AppComponent { }
28. @ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent ], }) export class TicketsModule { }
29. @ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent ], }) export class TicketsModule { }
30. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(HttpClientModule), importProvidersFrom(RouterModule.forRoot(APP_ROUTES)), ] });
31. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(HttpClientModule), importProvidersFrom(RouterModule.forRoot(APP_ROUTES)), ] });
32. @ManfredSteyer
33. @ManfredSteyer
34. @ManfredSteyer
35. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(HttpClientModule), importProvidersFrom(RouterModule.forRoot(APP_ROUTES)), ] });
36. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(HttpClientModule), provideRoutes(APP_ROUTES), ] });
37. @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) }, ];
38. @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) }, ];
39. @ManfredSteyer export const FLIGHT_BOOKING_ROUTES: Routes = [{ path: '', component: FlightBookingComponent, providers: [ MyService ], children: [ […] ] }];
40. @ManfredSteyer export const FLIGHT_BOOKING_ROUTES: Routes = [{ path: '', component: FlightBookingComponent, providers: [ MyService ], children: [ […] ] }]; (Lazily) loaded with route config Scope: This route + all child routes
41. @ManfredSteyer export const FLIGHT_BOOKING_ROUTES: Routes = [{ path: '', component: FlightBookingComponent, providers: [ ...configureMyLibrary() ], children: [ […] ] }];
42. @ManfredSteyer
43. @ManfredSteyer
44. @ManfredSteyer // index.ts == Public API export * from './flight-booking.component'; export * from './flight-card/flight-card.component';
45. @ManfredSteyer
46. @ManfredSteyer import * as booking from './booking'; […] @Component({ standalone: true, imports: [ booking, […] ], […] }) export class MyComponent { […] } Wish List
47. @ManfredSteyer
48. @ManfredSteyer "paths": { "@demo/data": ["src/app/data/index.ts"], "@demo/shared": ["src/app/shared/index.ts"], "@demo/shell": ["src/app/shell/index.ts"], "@demo/booking": ["src/app/booking/index.ts"] }
49. @ManfredSteyer import * as booking from '@demo/booking'; […] @Component({ standalone: true, imports: [ ...Object.values(booking) as any[], […] ], […] }) export class MyComponent { […] }
50. @ManfredSteyer
51. @ManfredSteyer + Generates path mappings + Generates initial barrel + Prevents bypassing index.ts + much more
52. @ManfredSteyer
53. @ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util @ManfredSteyer
54. @ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
55. @ManfredSteyer
56. @ManfredSteyer
57. @ManfredSteyer
58. @ManfredSteyer
59. @ManfredSteyer
60. @ManfredSteyer
61. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Today (with NgModules) NgModule Comp3 NgModule
62. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Tomorrow (without NgModules) Comp3
63. @ManfredSteyer Conclusion Mental Model Folders & Barrels Mapped Paths Nx, Libs, and Constraints FTW!
64. @ManfredSteyer 2022
65. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io