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
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
AIともっと楽するE2Eテスト
myohei
6
2.6k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Site-Speed That Sticks
csswizardry
10
690
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Language of Interfaces
destraynor
158
25k
Rails Girls Zürich Keynote
gr2m
95
14k
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