とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

Angular 9.0.0-next.10 で Ivy のデバッグ機能を試す

Angular

AngularConnect の Keynote に Ivy のデバッグ機能の紹介があったので試す (Keynote の 38 分くらいから)

準備

  • @angular/cli@next で新規アプリケーションを作成
    • routing の設定と stylesheet format はなんでもよい
$ npx @angular/cli@next new sample-app
  • 作られたアプリケーションを起動
$ cd sample-app
$ yarn start --open

試すこと

  • Devtools 上から AppComponent の title を変更する
    • sample-app app is running! を Debug app is running! に変更

変更前 f:id:kasaharu:20191014103258p:plain

変更後 f:id:kasaharu:20191014103225p:plain

手順(以下 Devtools で実施)

  • AppComponent の element を取得
element = document.querySelector('app-root');
  • element から component を取得
component = ng.getComponent(element);
  • 取得した component の title を変更
component.title = "Debug";
  • component を marking して変更検知が必要であることを伝える
ng.markDirty(component);

f:id:kasaharu:20191014105213p:plain

メモ