Astro で Angular を使ってみる
YNZT気になってました
YNZTひとまず yarn create astro して yarn astro add @analogjs/astro-angular 。
見慣れた子たちが自動で追加される。
@analogjs/astro-angular のバージョンは 0.1.0-beta.1
YNZTtsconfig.app.json が必要とのことで記事の内容で作成。
tsconfig.json の方にも experimentalDecorators の設定を追加しておいた。
YNZT記事のコンポーネントを追加。
お初の standalone component だ。
yarn dev & yarn build してみて表示を確認。
client:load の有無でJS が読み込まれたり読み込まれなかったりするのも動作している。
YNZTbuild した時の HTML を見てみると、body 要素の中に下記の HTML が出力されていた。
（まだ beta）
<html><head></head><body><app-hello ng-version="14.2.0"><p>Hello from Angular!!</p><button>Toggle</button><p>Toggled</p><!----></app-hello></body></html>
client:load した時に読み込まれる JS を見てみる。
YNZTtemplate じゃなくて templateUrl を使用しても動作した 📝
YNZTstyleUrls も動くが、.scss でネスト使用 & yarn dev 時、下記の画像の様に出力された。
YNZTきちんと VSCode 拡張機能も動いている。
YNZTよく見たら
Some language features are not available. To access all features, enable strictTemplates in angularCompilerOptions.
と VSCode に言われていたので、tsconfig.app.json に書いてある angularCompilerOptions は tsconfig.json に動かした。