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
Libraries for Angular: Talk at ngPoland in Wars...
Search
Manfred Steyer
PRO
November 21, 2017
Programming
0
150
Libraries for Angular: Talk at ngPoland in Warsaw, November 2017
Slides from my talk at ngPoland in Warsaw, November 2017
Manfred Steyer
PRO
November 21, 2017
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
6
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
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
92
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
Other Decks in Programming
See All in Programming
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
340
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
910
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
15k
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
650
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
510
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
620
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
750
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
100
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Statistics for Hackers
jakevdp
799
220k
Music & Morning Musume
bryan
46
6.6k
Visualization
eitanlees
146
16k
We Have a Design System, Now What?
morganepeng
53
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Navigating Team Friction
lara
187
15k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Practical Orchestrator
shlominoach
188
11k
The Invisible Side of Design
smashingmag
301
51k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Transcript
Packages for Angular Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
Contents • npm Packages • Barrels • Starting a Project
• Test & Deployment • DEMO • Schematics Sneak Peek
npm Packages
Why npm Packages? Reusable Logic Structuring big Applications
Structure of an npm Package • /node_modules • your-stuff •
package.json
Properties in package.json (Selection) name version description entry-point(s) typings dependencies
Barrels
Idea behind Barrels • ES Module: File == Modul •
Far too fine-grained for consumers of an lib • Barrel == Façade for those files == Public API
index.ts as Barrel export * from './src/demo.service'; export { OtherDemoService
} from './src/other-demo.service'; @NgModule({ … }) export class LibStarterModule { }
Project Start
Angular Package Format https://goo.gl/hjt7G3
Many Details!
Generator • npm install -g yo • npm install -g
generator-angular2-library • yo angular2-library
Other Generator Focus regarding Packages: Internal usage for structuring big
applications (monorepo) + much more (Ngrx, ngUpgrade, …) https://nrwl.io/nx
Test and Deployment
Local testing • Symbolic Links • Library: npm link •
Consumer: npm link library-name
Lessons Learned • Debugging: Link src folder • Or even
copy src folder • ng serve --preserve-symlinks • Testing before production: link dist folder and test with AOT* * will be default soon
Publishing to npm Registry • Increment version in package.json •
npm version [patch | minor | major | version] • npm run build • cd ../dist • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873
Locale npm-Registry • TFS • Nexus • Verdaccio • Very
lightweight • npm i -g verdaccio • Start: verdaccio
Alternatives for setting the Registry • Global: npm set registry
http://localhost:4873 • Default: registry.npmjs.org • npm get registry • Project: .npmrc in project root
DEMO <<Token>> LOGGER_DEBUG: InjectionTaken<boolean>(…)
Schematics Sneak Peak
Package w/ Schematics Collection Command Args Factory w/ Rules for
Code Generation Templates
Template import { AbstractFormatterService } from 'my-lib'; export class <%=
classify(name) %>Service implements AbstractFormatterService { public format(message: string): string { <% if (demoImpl) { %> // Some Demo Implementation <% } else { %> return message; <% } %> } }
More about this • See Blog at https://softwarearchitekt.at/
Conclusion Packages for Structuring and Reuse Angular Package Format Generator
npm link Own Registry Schematics
Contact [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer