Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular's Future Without NgModules: What Does That Mean for Our Architecture?

Angular's Future Without NgModules: What Does That Mean for Our Architecture?

Manfred Steyer

January 19, 2022
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @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 {
  2. @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 {}
  3. @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 {}
  4. @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
  5. @ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ HomeComponent, AboutComponent,

    HttpClientModule, ], templateUrl: '…' }) export class AppComponent { […] }
  6. @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 { […] }
  7. @ManfredSteyer @Pipe({ standalone: true, name: 'city', pure: true }) export

    class CityPipe implements PipeTransform { […] }
  8. @ManfredSteyer @Pipe({ standalone: true, name: 'city', pure: true }) export

    class CityPipe implements PipeTransform { […] }
  9. @ManfredSteyer @Directive({ standalone: true, selector: 'input[appCity]', providers: [ … ]

    }) export class CityValidator implements Validator { […] }
  10. @ManfredSteyer @Component({ standalone: true, imports: [ […], FlightCardComponent, CityPipe, CityValidator,

    ], selector: 'flight-search', templateUrl: '…' }) export class FlightSearchComponent { […] }
  11. @ManfredSteyer It looks like you want to use NgIfDirective and

    MyComponent. Shall I import it for you?
  12. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […]

    HttpClientModule, RouterModule.forRoot([ { path: 'home', component: HomeComponent }, […] ]) ], templateUrl: '…' }) export class AppComponent { }
  13. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […]

    HttpClientModule, RouterModule.forRoot([ { path: 'home', component: HomeComponent }, […] ]) ], templateUrl: '…' }) export class AppComponent { }
  14. @ManfredSteyer import * as booking from './booking'; […] @Component({ standalone:

    true, imports: [ ...Object.keys(booking) as any[], […] ], […] }) export class MyComponent { […] }
  15. @ManfredSteyer import * as booking from './booking'; […] @Component({ standalone:

    true, imports: [ ...Object.values(booking) as any[], […] ], […] }) export class MyComponent { […] } Not beautiful!
  16. @ManfredSteyer import * as booking from './booking'; […] @Component({ standalone:

    true, imports: [ ...all(booking), […] ], […] }) export class MyComponent { […] } Custom Helper Function
  17. @ManfredSteyer import * as booking from '@demo/booking'; […] @Component({ standalone:

    true, imports: [ ...Object.values(booking) as any[], […] ], […] }) export class MyComponent { […] }
  18. @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
  19. @ManfredSteyer Conclusion Mental Model Mental Model Folders & Barrels Folders

    & Barrels Mapped Paths Mapped Paths Nx, Libs, and Constraints FTW! Nx, Libs, and Constraints FTW!