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
380
なぜ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
How GitHub (no longer) Works
holman
315
140k
How STYLIGHT went responsive
nonsquared
100
5.8k
Writing Fast Ruby
sferik
628
62k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Review Best Practice
trishagee
71
19k
Documentation Writing (for coders)
carmenintech
74
5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
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