Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Elementsにハマってみた/I use the Angular Elements

D604f023b849832e420673fac231bad6?s=47 Eiji Hachiya
January 29, 2020
460

Angular Elementsにハマってみた/I use the Angular Elements

2020/01/29(水) に行われたClassiAngularNight #5の資料です

D604f023b849832e420673fac231bad6?s=128

Eiji Hachiya

January 29, 2020
Tweet

Transcript

  1. Copyright © 2020 Classi Corp. All Rights Reserved. Angular Elementsでハマってみた


    2020/01/29 Classi Angular Night #5 

  2. Copyright © 2020 Classi Corp. All Rights Reserved. • 八谷

    英治 (はちや えいじ)
 • Twitter hachi_eiji
 • Classi株式会社
 • エンジニアリングマネージャー
 1 自己紹介

  3. Copyright © 2020 Classi Corp. All Rights Reserved. AngularJS使ってますか!! 2

    https://connpass.com/event/78163/presentation/

  4. 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
  5. Copyright © 2020 Classi Corp. All Rights Reserved. この部分だけAngular Elementsを使う

    4
  6. Copyright © 2020 Classi Corp. All Rights Reserved. リロードすると見えたり、見えなかったりする みんな大好き

    IE/Edgeだけ動かない(ことが多々ある) 5
  7. Copyright © 2020 Classi Corp. All Rights Reserved. 原因はAngular Elementsの起動順番にあった

    6 Angular Elements
 AngularJS
 ① Load Script
 ② Load Script
 ①’ bootstrap
 ②’ bootstrap
 時間
 Angularのコンポーネントを呼び出すために AngularJSのbootstrapを呼び出す前に Angularの初期化を終わせる必要があった
  8. 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); })

  9. 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']); }); });

  10. Copyright © 2020 Classi Corp. All Rights Reserved. 大切なことなのでもう一度 9

    https://connpass.com/event/78163/presentation/

  11. Copyright © 2020 Classi Corp. All Rights Reserved. 2021年に終わるので徐々に変えていき 10