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 Elementsにハマってみた/I use the Angular Elements
Search
Eiji Hachiya
January 29, 2020
0
1.1k
Angular Elementsにハマってみた/I use the Angular Elements
2020/01/29(水) に行われたClassiAngularNight #5の資料です
Eiji Hachiya
January 29, 2020
Tweet
Share
More Decks by Eiji Hachiya
See All by Eiji Hachiya
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
2
430
なぜClassiはReactが盛り上がってる2017年にAngularを選択したのか?/why we use angular
hachi_eiji
2
1.7k
【Real Tech Night #2】学校教育を支えるマルチテナント/multi-tenant_in_edtech
hachi_eiji
1
290
レガシー業界の社内を変える /realtech
hachi_eiji
0
510
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
How STYLIGHT went responsive
nonsquared
100
5.8k
Scaling GitHub
holman
463
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Navigating Team Friction
lara
189
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Transcript
Copyright © 2020 Classi Corp. All Rights Reserved. Angular Elementsでハマってみた
2020/01/29 Classi Angular Night #5
Copyright © 2020 Classi Corp. All Rights Reserved. • 八谷
英治 (はちや えいじ) • Twitter hachi_eiji • Classi株式会社 • エンジニアリングマネージャー 1 自己紹介
Copyright © 2020 Classi Corp. All Rights Reserved. AngularJS使ってますか!! 2
https://connpass.com/event/78163/presentation/
Copyright © 2020 Classi Corp. All Rights Reserved. AngularJS •
Angular Elementsを使う Angular Elements概要 • Angular ElementsによるAngularJSの段階的アップグレード戦略 AngularJS の中でAngularを動かす 3 Angularで作った コンポーネント Angularで作った コンポーネント Angularで作った コンポーネント Angularで作った コンポーネント Angularで作った コンポーネント Custom Element
Copyright © 2020 Classi Corp. All Rights Reserved. この部分だけAngular Elementsを使う
4
Copyright © 2020 Classi Corp. All Rights Reserved. リロードすると見えたり、見えなかったりする みんな大好き
IE/Edgeだけ動かない(ことが多々ある) 5
Copyright © 2020 Classi Corp. All Rights Reserved. 原因はAngular Elementsの起動順番にあった
6 Angular Elements AngularJS ① Load Script ② Load Script ①’ bootstrap ②’ bootstrap 時間 Angularのコンポーネントを呼び出すために AngularJSのbootstrapを呼び出す前に Angularの初期化を終わせる必要があった
Copyright © 2020 Classi Corp. All Rights Reserved. 解決案その1 7
Angular Elements AngularJS ① Load Script ② Load Script ③ bootstrap ④ bootstrap 時間 問題点 ③が終わる前に④のイベントを待受イベン トの起動完了させないと空振りが起きる AngularJS側の 起動Eventを投げる platformBrowserDynamic() .bootstrapModule(<モジュール名>) .then((moduleRef) => { defineCustomElements(moduleRef.injector); }) .then(() => { // AngularJSを呼び出す前にAngularの初期化を終わらせたい // angularJSElementInitialized イベントはAngularJS側に記載する const event = new Event('angularJSElementInitialized'); window.dispatchEvent(event); })
Copyright © 2020 Classi Corp. All Rights Reserved. 最終的な解決案 8
Angular Elements AngularJS ① Load Script ② Load Script ③ bootstrap ④ bootstrap 時間 Promise.thenで イベントを起動する window.addEventListener('DOMContentLoaded', function () { // initializeElementはAngular Element上で定義済み window['initializeElement']().then(function () { angular.bootstrap(document, ['classi']); }); });
Copyright © 2020 Classi Corp. All Rights Reserved. 大切なことなのでもう一度 9
https://connpass.com/event/78163/presentation/
Copyright © 2020 Classi Corp. All Rights Reserved. 2021年に終わるので徐々に変えていき 10