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
manfredsteyer
PRO
0
320
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
480
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
220
Other Decks in Programming
See All in Programming
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
Design Foundational Data Engineering Observability
sucitw
3
160
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
1.9k
Kiroで始めるAI-DLC
kaonash
2
540
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
270
rage against annotate_predecessor
junk0612
0
160
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
400
print("Hello, World")
eddie
1
490
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
710
Ruby Parser progress report 2025
yui_knk
1
300
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Docker and Python
trallard
45
3.5k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
KATA
mclloyd
32
14k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Producing Creativity
orderedlist
PRO
347
40k
Bash Introduction
62gerente
615
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Gamification - CAS2011
davidbonilla
81
5.4k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
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