Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular's Future without NgModules: Architectur...
Search
Manfred Steyer
PRO
September 27, 2022
Programming
0
520
Angular's Future without NgModules: Architectures with Standalone Components
Manfred Steyer
PRO
September 27, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
2
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
630
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
500
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Other Decks in Programming
See All in Programming
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.6k
チームのテスト力を鍛える
goyoki
3
940
楽して成果を出すためのセルフリソース管理
clipnote
0
190
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
rage against annotate_predecessor
junk0612
0
170
はじめてのMaterial3 Expressive
ym223
2
900
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
OSS開発者という働き方
andpad
5
1.7k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
API Platform 4.2: Redefining API Development
soyuka
0
220
Kiroで始めるAI-DLC
kaonash
2
630
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Gamification - CAS2011
davidbonilla
81
5.4k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Code Review Best Practice
trishagee
71
19k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making Projects Easy
brettharned
117
6.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
We Have a Design System, Now What?
morganepeng
53
7.8k
Transcript
@ManfredSteyer Angular's Future without NgModules: Architectures with Standalone Components
@ManfredSteyer
@ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ HomeComponent, AboutComponent,
HttpClientModule, ], templateUrl: '…' }) export class AppComponent { […] }
@ManfredSteyer
@ManfredSteyer Agenda #1 Mental Model #2 #3 Routing & Lazy
Loading #4 Structuring Applications
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Standalone Component = Component + NgModule (not implemented that
way!)
@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 { […] }
@ManfredSteyer @Pipe({ standalone: true, name: 'city', pure: true }) export
class CityPipe implements PipeTransform { […] }
@ManfredSteyer @Directive({ standalone: true, selector: 'input[appCity]', providers: [ … ]
}) export class CityValidator implements Validator { […] }
@ManfredSteyer @Component({ standalone: true, imports: [ […], FlightCardComponent, CityPipe, CityValidator,
], selector: 'flight-search', templateUrl: '…' }) export class FlightSearchComponent { […] }
@ManfredSteyer
@ManfredSteyer It looks like you want to use NgIfDirective and
MyComponent. Shall I import it for you?
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […]
TicketsModule, ], templateUrl: '…' }) export class AppComponent { }
@ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […]
TicketsModule, ], templateUrl: '…' }) export class AppComponent { }
@ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent
], }) export class TicketsModule { }
@ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent
], }) export class TicketsModule { }
@ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(HttpClientModule), importProvidersFrom(RouterModule.forRoot(APP_ROUTES)), ] });
@ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(HttpClientModule), importProvidersFrom(RouterModule.forRoot(APP_ROUTES)), ] });
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer bootstrapApplication(AppComponent, { providers: [ […] ] });
@ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(HttpClientModule), importProvidersFrom(RouterModule.forRoot(APP_ROUTES)), ] });
@ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(HttpClientModule), provideRouter(APP_ROUTES, withPreloading(PreloadAllModules), withDebugTracing(),
), ] });
@ManfredSteyer export const APP_ROUTES: Routes = [ […], { path:
'flight-booking', loadChildren: () => import('@nx-example/booking/feature-book') .then(m => m.FLIGHT_BOOKING_ROUTES) }, […] ];
@ManfredSteyer export const APP_ROUTES: Routes = [ […], { path:
'flight-booking', loadChildren: () => import('@nx-example/booking/feature-book') .then(m => m.FLIGHT_BOOKING_ROUTES) }, […] ];
@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) }, ];
@ManfredSteyer export const FLIGHT_BOOKING_ROUTES: Routes = [{ path: '', component:
FlightBookingComponent, providers: [ MyService ], children: [ […] ] }];
@ManfredSteyer export const FLIGHT_BOOKING_ROUTES: Routes = [{ path: '', component:
FlightBookingComponent, providers: [ MyService ], children: [ […] ] }]; Scope: This route + all child routes (Lazily) loaded with route config If possible, use providedIn: 'root'
@ManfredSteyer export const FLIGHT_BOOKING_ROUTES: Routes = [{ path: '', component:
FlightBookingComponent, providers: [ provideState(bookingFeature), provideEffects([BookingEffects]) ], children: [ […] ] }];
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer // index.ts == Public API export * from './flight-booking.routes';
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer + Generates path mappings + Generates initial barrel +
Prevents bypassing index.ts + Restricting access between libraries
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer provideRouter & withXYZ Directly point to lazy router configs
Folders & Barrels Nx, Libs, and Constraints FTW!
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io