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

Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022

Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022

Manfred Steyer

May 04, 2022
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Published via npm:

    Pain! SPA: Download to the Client Version Mismatches?
  2. @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.
  3. @ManfredSteyer Finegrained Libraries • Unit of recompilation • Unit of

    retesting • Access restrictions • Information Hiding • Easy: Just ng g lib … • Future replacement for NgModules?
  4. @ManfredSteyer What's the Issue With NgModules? 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 It looks like you want to use NgIfDirective and

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

    HttpClientModule, ], templateUrl: '…' }) export class AppComponent { }
  8. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […]

    HttpClientModule, ], templateUrl: '…' }) export class AppComponent { }