Angular's Future Without NgModules: What Does That Mean for Our Architecture? @ordina March 2022

# CLI Example
https://github.com/manfredsteyer/sa-cli.git (see branches)

# Nx Examples
https://github.com/manfredsteyer/sa-nx.git

# Our free eBook on Architecture
https://www.angulararchitects.io/book

Transcript

1. @ManfredSteyer Angular's Future Without NgModules What Does That Mean for Our Architecture?
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer
5. @ManfredSteyer
6. @ManfredSteyer Angular 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 bootstrapComponent(AppComponent);
13. @ManfredSteyer
14. @ManfredSteyer #1 Mental Model #2 Compatibility #3 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: [ HomeComponent, AboutComponent, HttpClientModule, ], templateUrl: '…' }) export class AppComponent { […] } @NgModule({ imports: [ HttpClientModule ], declares: [ HomeComponent, AboutComponent ] }) export class AppModule { … } @Component({ selector: 'app-root', templateUrl: '…' }) export class AppComponent { […] } @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 (… using a shim for Standalone Blocks NOT intented for production)
25. @ManfredSteyer
26. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […] HttpClientModule, RouterModule.forRoot([ { path: 'home', component: HomeComponent }, […] ]) ], templateUrl: '…' }) export class AppComponent { }
27. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […] HttpClientModule, RouterModule.forRoot([ { path: 'home', component: HomeComponent }, […] ]) ], 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
31. @ManfredSteyer (… using a shim for Standalone Blocks NOT intented for production)
32. @ManfredSteyer
33. @ManfredSteyer
34. @ManfredSteyer // index.ts == Public API export * from './flight-booking.component'; export * from './flight-card/flight-card.component';
35. @ManfredSteyer import * as booking from './booking'; […] @Component({ standalone: true, imports: [ ...Object.values(booking) as any[], […] ], […] }) export class MyComponent { […] }
36. @ManfredSteyer import * as booking from './booking'; […] @Component({ standalone: true, imports: [ ...Object.values(booking) as any[], […] ], […] }) export class MyComponent { […] } Not beautiful!
37. @ManfredSteyer import * as booking from './booking'; […] @Component({ standalone: true, imports: [ ...all(booking), […] ], […] }) export class MyComponent { […] } Custom Helper Function
38. @ManfredSteyer import * as booking from './booking'; […] @Component({ standalone: true, imports: [ booking, […] ], […] }) export class MyComponent { […] }
39. @ManfredSteyer
40. @ManfredSteyer
41. @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"] }
42. @ManfredSteyer import * as booking from '@demo/booking'; […] @Component({ standalone: true, imports: [ ...Object.values(booking) as any[], […] ], […] }) export class MyComponent { […] }
43. @ManfredSteyer (… using a shim for Standalone Blocks NOT intented for production)
44. @ManfredSteyer
45. @ManfredSteyer + Generates path mappings + Generates initial barrel + Prevents bypassing index.ts + much more
46. @ManfredSteyer
47. @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
48. @ManfredSteyer (… using a shim for Standalone Blocks NOT intented for production)
49. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
50. @ManfredSteyer
51. @ManfredSteyer
52. @ManfredSteyer
53. @ManfredSteyer
54. @ManfredSteyer
55. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Today (with NgModules) NgModule Comp3 NgModule
56. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Tomorrow (without NgModules) Comp3
57. @ManfredSteyer Angular Architektur Workshop (100% Online, Interaktiv) https://angulararchitects.io/public Further Workshops: Angular Security Professional Angular Testing
58. @ManfredSteyer Conclusion Mental Model Mental Model Folders & Barrels Folders & Barrels Mapped Paths Mapped Paths Nx, Libs, and Constraints FTW! Nx, Libs, and Constraints FTW!
59. @ManfredSteyer 2022
60. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io