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
Angularのライブラリ作成について /ng-kyoto-angular-meetup-8
Search
Sayaka Nakatsuka
October 06, 2018
Technology
0
460
Angularのライブラリ作成について /ng-kyoto-angular-meetup-8
ng-kyoto Angular Meetup #8 (2018/10/06) での 発表資料です。
https://ng-kyoto.connpass.com/event/100685/
Sayaka Nakatsuka
October 06, 2018
Tweet
Share
More Decks by Sayaka Nakatsuka
See All by Sayaka Nakatsuka
Angular 7 から 8にあげてみた /ng-kyoto-angular-meetup-10
sayanaka
3
2.3k
HammerGestureConfigの 浅掘り /ionic-meetup-10
sayanaka
1
380
Angular ライブラリ開発 /ng-japan-onair
sayanaka
0
220
Other Decks in Technology
See All in Technology
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
150
Uncle Bobの「プロフェッショナリズムへの期待」から学ぶプロの覚悟
nakasho
2
110
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
300
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
460
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
130
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
160
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
310
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
220
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
720
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
380
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
650
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
770
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Writing Fast Ruby
sferik
629
62k
Context Engineering - Making Every Token Count
addyosmani
5
230
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
RailsConf 2023
tenderlove
30
1.2k
Transcript
AngularͷϥΠϒϥϦ࡞ʹ ͍ͭͯ ng-kyoto Angular Meetup #8 @sayanaka
@sayanaka • ࣾձਓ̑ʢͨͿΜʣ • JavaScript৮Γͩͯ̏͠ • લ৬ɿC#ϝΠϯͷձࣾͰͳ͔ͥ1ਓ͚ͩJSॻ͍ͯ·ͨ͠ • ࠓ݄͔Βɺ͍Ζ͍Ζ͘ઙ͘৮Δձࣾʹస৬ •
GO, Angular, React… • Ϟϒϓϩָ͍͠ʢ͚ͲΊͬͪΌർΕΔʂʣ
ͦͦ • ۀͰAngularͷϥΠϒϥϦ࡞ͬͯͨ (2016ޙʙʣ • AngularΛͬͨʮαΠτ/ΞϓϦʯͷใ͋Δ • AngularΛͬͨʮϥΠϒϥϦʯͷ։ൃใ΄΅ͳ ͍
ཁ͋Δɾɾɾ https://github.com/angular/angular-cli/ issues/1692
※ࡶͳ༁ : ɹٞ͋Γ͕ͱ͏ʂͰॾʑͷཧ༝ͰɺCLI 1.xͰ࣮Ͱ͖ͳ͍Μͩʂ https://github.com/angular/angular-cli/issues/1692#issuecomment-304970595
sayanaka͕͍͋ͨ • ͍ΖΜͳAngularϥΠϒϥϦͷϏϧυํ๏Λௐࠪ • angular-library-seed • ngx-translate • angular-calendar •
ௐࠪ݁ՌΛͱʹɺ͓ख webpack.config.tsΛ ࡞ʂ
͕͍͋ͨΜ͚ͩͲɾɾɾ • ng build௨ͬͯɺng build —-prod௨ Βͳ͍ɾɾɾ • AoTϏϧυ͕ͤͳ͍ɾɾɾ
ͦͯ͠ߟ͑ΔͷΛΊͨ • ϓϩμΫγϣϯϏϧυ͢Δͱ͖ɺ ng build —prod —aot=falseͰ❤ • όουϊϋͳͷͰྑ͍ࢠΊ·͠ΐ͏ •
@angular/
[email protected]
Ͱɺ—aotΦϓγϣϯΛՃ ͢ΔͱΤϥʔు͖·͢ɻ
ͦͷ··࣌ܦͪ2017ळ • ng-packagr ര
ng-packagr • AngularͷPackage FormatʹԊͬͯΑ͠ͳʹϏϧυͯ͠ ͘ΕΔਆϥΠϒϥϦ • v1.0.0 - 2017/08/31ϦϦʔε •
ng-package.jsonΛ༻ҙͯ͠ɺ͋ͱී௨ͷnpmϥΠϒ ϥϦͱಉ͡Α͏ͳײ֮Ͱpackage.jsonΛॻ͍ͯɺʮng- packagrʯίϚϯυୟ͚ͩ͘ʂ͍͞͠ʂ
ng-packagr
ng-packagr • ng new ~Ͱ࡞ͬͨϓϩδΣΫτ্Ͱͳ͍ͱ͍͚ͳ͍ • ʙCLI 1.x.x • appϑΥϧμͱಉ֊ʹɺϥΠϒϥϦ༻ͷϑΥϧ
μΛ࡞ͬͯͦ͜ʹίʔυల։ • ྫɿ ng-packaged
ҙ • AoTϏϧυ͕௨Βͳ͍ঢ়ଶͩͱɺϥΠϒϥϦͱͯ͠ϏϧυͰ͖ ͳ͍ • ٯʹ͍͏ͱɺϥΠϒϥϦͱͯ͠Ϗϧυ͕௨ΕɺAoT௨Δ • export * from
‘~~’ͱ͔ॻ͍ͯΔͱɺϏϧυΤϥʔΛు͘߹͕ ͋Δ • importจͰɺʮ~~/indexʯΛলུ͠ͳ͍ • ԣணͤͣɺ໌֬ʹexport { hoge, fuga } from ‘~~’ͱ͢Δ͜ͱ
ಋೖ͢Δͷ໘ͦ͘͞͏ɾɾɾ
Angular CLI 6 • 2018.05.04ϦϦʔε - ݱࡏ v6.2.4 • ઃఆϑΝΠϧ͕มΘͬͨ
• ΊͬͪΌػೳ͕૿͑ͨ
Library Support!
Angular CLI 6 • Angular CLIͱɺng-packagr͕࿈ܞ͢ΔΑ͏ʹ ͳͬͨ • ng g
library ~Λୟ͘ͱɺng-packagr͕མͪͯ͘ Δ • σϞ
·ͱΊ
·ͱΊ • ng-packagrྑ͍ͧ • Angular CLI 6.x͔Β ΊͬͪΌ؆୯ʹϥΠϒϥϦΛ࡞ΕΔΑ͏ʹ ͳ͍ͬͯΔͷͰɺͥͻͬͯΈ͍ͯͩ͘͞ʂ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ