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 Warsaw, November 2017
Search
Manfred Steyer
PRO
November 21, 2017
Programming
0
140
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
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
58
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
46
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
390
Micro Frontends with Web Standards
manfredsteyer
PRO
1
290
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
210
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
100
NGRX Signal Store
manfredsteyer
PRO
0
200
Other Decks in Programming
See All in Programming
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Ruby Pattern Matching
bkuhlmann
0
920
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
puregoの活用例
aethiopicuschan
0
220
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
Elm 0.19.0 Changes
bkuhlmann
0
480
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
3.2k
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
420
Featured
See All Featured
Building an army of robots
kneath
300
41k
Design by the Numbers
sachag
274
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Designing for humans not robots
tammielis
247
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
57k
Atom: Resistance is Futile
akmur
258
25k
KATA
mclloyd
14
12k
How to Ace a Technical Interview
jacobian
272
22k
Scaling GitHub
holman
457
140k
Code Review Best Practice
trishagee
54
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
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