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
25
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
87
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
150
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
93
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
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
660
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
Team operations that are not burdened by SRE
kazatohiei
1
310
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
技術同人誌をMCP Serverにしてみた
74th
1
650
Hack Claude Code with Claude Code
choplin
4
2.1k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
AIともっと楽するE2Eテスト
myohei
6
2.6k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
GraphQLとの向き合い方2022年版
quramy
49
14k
The Invisible Side of Design
smashingmag
301
51k
BBQ
matthewcrist
89
9.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Faster Mobile Websites
deanohume
307
31k
Docker and Python
trallard
44
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
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