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
October 25, 2022
Programming
0
300
Angular's Future without NgModules: Architectures with Standalone Components
Manfred Steyer
PRO
October 25, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
48
All About Angular's New Signal Forms
manfredsteyer
PRO
0
180
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
200
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
140
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
73
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
44
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
400
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
660
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
540
Other Decks in Programming
See All in Programming
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
Software Architecture
hschwentner
6
2.3k
XP, Testing and ninja testing ZOZ5
m_seki
3
700
株式会社 Sun terras カンパニーデック
sunterras
0
340
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
5.1k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
580
Swift Concurrency - 状態監視の罠
objectiveaudio
2
540
AI Agent 時代的開發者生存指南
eddie
3
1.8k
私はどうやって技術力を上げたのか
yusukebe
44
19k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLとの向き合い方2022年版
quramy
49
14k
Mobile First: as difficult as doing things right
swwweet
225
10k
Become a Pro
speakerdeck
PRO
29
5.6k
Gamification - CAS2011
davidbonilla
81
5.5k
A better future with KSS
kneath
239
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
How to train your dragon (web standard)
notwaldorf
97
6.3k
A designer walks into a library…
pauljervisheath
209
24k
Transcript
@ManfredSteyer Angular's Future without NgModules: Architectures with Standalone Components
@ManfredSteyer
@ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ HomeComponent, AboutComponent,
], templateUrl: '…' }) export class AppComponent { […] }
@ManfredSteyer
@ManfredSteyer #1 Routing & Lazy Loading #2 Structuring Applications
@ManfredSteyer Manfred Steyer
@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 Free eBook (brand new) ANGULARarchitects.io/standalone-book Standalone Components Download here:
@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