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
25
All About Angular's New Signal Forms
manfredsteyer
PRO
0
170
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
190
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
130
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
68
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
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
Claude Agent SDK を使ってみよう
hyshu
0
810
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
430
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
Software Architecture
hschwentner
6
2.3k
CSC305 Lecture 04
javiergs
PRO
0
270
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Swift Concurrency - 状態監視の罠
objectiveaudio
2
530
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Making Projects Easy
brettharned
120
6.4k
Code Reviewing Like a Champion
maltzj
526
40k
Balancing Empowerment & Direction
lara
4
690
Facilitating Awesome Meetings
lara
56
6.6k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Embracing the Ebb and Flow
colly
88
4.8k
The Language of Interfaces
destraynor
162
25k
Producing Creativity
orderedlist
PRO
347
40k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Cost Of JavaScript in 2023
addyosmani
55
9k
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