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
Enterprise Angular with Nx: Robust Architectur...
Search
Manfred Steyer
PRO
April 19, 2021
Programming
0
260
Enterprise Angular with Nx: Robust Architectures and Fast Builds @iJS London 2021
Manfred Steyer
PRO
April 19, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
74
Other Decks in Programming
See All in Programming
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
3.9k
5つのアンチパターンから学ぶLT設計
narihara
1
150
技術同人誌をMCP Serverにしてみた
74th
1
590
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
120
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
Goで作る、開発・CI環境
sin392
0
190
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
900
ふつうの技術スタックでアート作品を作ってみる
akira888
0
390
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
590
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
For a Future-Friendly Web
brad_frost
179
9.8k
Raft: Consensus for Rubyists
vanstee
140
7k
What's in a price? How to price your products and services
michaelherold
246
12k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Language of Interfaces
destraynor
158
25k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
RailsConf 2023
tenderlove
30
1.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Orchestrator
shlominoach
188
11k
Transcript
@BASTAcon & @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Enterprise Angular with
Nx: Robust Architectures and Fast Builds
@BASTAcon & @ManfredSteyer
@BASTAcon & @ManfredSteyer
@BASTAcon & @ManfredSteyer
@ManfredSteyer
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Monorepo Structure
@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts
Sharing Libs: Easy
@ManfredSteyer Moving back and forth Npm Registry
@ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project
Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
@ManfredSteyer Creating a Workspace with the CLI npm install -g
@angular/cli ng new workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
@ManfredSteyer Tooling & Generator https://nrwl.io/nx
@ManfredSteyer Visualize Module Structure
@ManfredSteyer Creating a Workspace with the CLI npm install -g
@angular/cli ng new workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
@ManfredSteyer Creating a Workspace with Nx npm install -g @angular/cli
npm init nx-workspace myworkspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
@ManfredSteyer Creating a Workspace with NX npm install -g @angular/cli
npm init nx-workspace myworkspace cd workspace ng generate app my-app ng generate lib my-lib --directory my-domain ng serve --project my-app ng build --project my-app
@ManfredSteyer DEMO
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Tagging Apps and Libs (nx.json) "booking": { "tags": ["domain:booking",
"type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
@ManfredSteyer Tagging Apps and Libs (nx.json) "booking": { "tags": ["domain:booking",
"type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
@ManfredSteyer Linting (.eslintrc) { "sourceTag": "domain:booking", "onlyDependOnLibsWithTags": ["domain:booking", "domain:shared"] }
@ManfredSteyer DEMO
@ManfredSteyer
@ManfredSteyer Options File System Nx Cloud Custom Cache
@ManfredSteyer Configuration (nx.json) "tasksRunnerOptions": { "default": { "runner": "@nrwl/workspace/tasks-runners/default", […]
} },
@ManfredSteyer Configuration (nx.json) "tasksRunnerOptions": { "default": { "runner": "@nrwl/workspace/tasks-runners/default", "options":
{ "cacheableOperations": ["build", "lint", "test", "e2e"], […] } } },
@ManfredSteyer Using nx build app-or-lib --with-deps
@ManfredSteyer Prerequisite for Incremental Builds ng g lib lib-name --buildable
@ManfredSteyer DEMO
@ManfredSteyer Also Test and Lint-Results Can be Cached nx build
app-or-lib --with-deps nx lint app-or-lib --with-deps nx test app-or-lib --with-deps nx e2e app-or-lib --with-deps
@ManfredSteyer Nx Console for Visual Studio Code
@ManfredSteyer • • • •
@ManfredSteyer Free eBook ANGULARarchitects.io/book
@ManfredSteyer • • • •
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops