Frontend Moduliths with Angular and Standalone Components @BASTA! Spring 2022

# Example with Nx and NgModule
https://github.com/manfredsteyer/nx-angular-demo.git

# Example with Nx and Standalone Components
https://github.com/manfredsteyer/sa-nx.git

# Free eBook on Angular Architectures
https://www.angulararchitects.io/book

Transcript

1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Frontend Moduliths with Angular and Standalone Components
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App
5. @ManfredSteyer
6. @ManfredSteyer
7. @ManfredSteyer
8. @ManfredSteyer Manfred Steyer
9. @ManfredSteyer
10. @ManfredSteyer Monorepo Structure
11. @ManfredSteyer Everyone uses the latest versions No version conflicts Sharing Libs: Easy
12. @ManfredSteyer Npm Registry
13. @ManfredSteyer https://nrwl.io/nx
14. @ManfredSteyer Visualize Module Structure
15. @ManfredSteyer DEMO
16. @ManfredSteyer
17. @ManfredSteyer
18. @ManfredSteyer
19. @ManfredSteyer "booking": { "tags": ["domain:booking", "type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
20. @ManfredSteyer "booking": { "tags": ["domain:booking", "type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
21. @ManfredSteyer { "sourceTag": "domain:booking", "onlyDependOnLibsWithTags": ["domain:booking", "domain:shared"] }
22. @ManfredSteyer DEMO
23. @ManfredSteyer
24. @ManfredSteyer
25. @ManfredSteyer
26. @ManfredSteyer DEMO
27. @ManfredSteyer
28. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer Smart Comp. Dumb Comp.
29. @ManfredSteyer Automate
30. @ManfredSteyer Usage
31. @ManfredSteyer DEMO
32. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Modulith Today (with NgModules) NgModule Comp3 NgModule
33. @ManfredSteyer
34. @ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ HomeComponent, AboutComponent, HttpClientModule, ], templateUrl: '…' }) export class AppComponent { […] }
35. @ManfredSteyer @Pipe({ standalone: true, name: 'city', pure: true }) export class CityPipe implements PipeTransform { […] }
36. @ManfredSteyer @Directive({ standalone: true, selector: 'input[appCity]', providers: [ … ] }) export class CityValidator implements Validator { […] }
37. @ManfredSteyer @Component({ standalone: true, imports: [ […], FlightCardComponent, CityPipe, CityValidator, ], selector: 'flight-search', templateUrl: '…' }) export class FlightSearchComponent { […] }
38. @ManfredSteyer
39. @ManfredSteyer It looks like you want to use NgIfDirective and MyComponent. Shall I import it for you?
40. @ManfredSteyer
41. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […] HttpClientModule, RouterModule.forRoot([ { path: 'home', component: HomeComponent }, […] ]) ], templateUrl: '…' }) export class AppComponent { }
42. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […] HttpClientModule, RouterModule.forRoot([ { path: 'home', component: HomeComponent }, […] ]) ], templateUrl: '…' }) export class AppComponent { }
43. @ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent ], }) export class TicketsModule { }
44. @ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent ], }) export class TicketsModule { }
45. @ManfredSteyer
46. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Today (with NgModules) NgModule Comp3 NgModule
47. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Tomorrow (without NgModules) Comp3
48. @ManfredSteyer (… using a shim for Standalone Blocks NOT intented for production)
49. @ManfredSteyer Free eBook ANGULARarchitects.io/book
50. @ManfredSteyer • • • • •
51. @ManfredSteyer
52. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops