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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Copyright © 2020 Classi Corp. All Rights Reserved. 原因はAngular Elementsの起動順番にあった 6 Angular Elements  AngularJS  ① Load Script  ② Load Script  ①’ bootstrap  ②’ bootstrap  時間  Angularのコンポーネントを呼び出すために AngularJSのbootstrapを呼び出す前に Angularの初期化を終わせる必要があった

Slide 8

Slide 8 text

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); }) 

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text