🦔

静的なprerenderサイトをAngular 19にアップデートした時の2つのひっかかった箇所

2024/11/23に公開

以下のWebサイトは、Angularのprerenderを使って静的サイトとしてホスティングしています。

https://benaton.net/

https://concent-market.com/

Webサイト更新は、GitHub上でオーナーが行っているのですが、HTMLだと「間違って > を消してしまった!」みたいなことがあるので、TypeScriptファイルを更新してもらうことで、間違った箇所を編集したら型チェックで落ちるようにするためです。こんな感じでのファイルを更新してもらってます。

https://github.com/le-benaton/website/blob/main/src/data/news.ts#L1-L12

他も基本的にうちがメンテしてる静的サイトはすべてAngular製だったり。Angular以外の依存が少ないので、早速Angular19に ng update したのですが、ひっかかった箇所を2つ紹介しておきます。

1. ✘ [ERROR] TS2315: Type 'Http2ServerResponse' is not generic. [plugin angular-compiler]

✘ [ERROR] TS2315: Type 'Http2ServerResponse' is not generic. [plugin angular-compiler]

    node_modules/@angular/ssr/node/index.d.ts:190:100:
      190 │ ...rResponse | Http2ServerResponse<Http2ServerRequest>): Promise<...

型エラーです。調べてみると依存ファイルの更新に問題があったようで、node_modulesを再インストールすると直りました。

% rm -r -f node_modules package-lock.json && npm i

2. Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

エラーじゃないのですが、Dart Sassが現行の @import の振る舞いは3.0.0で削除されるよdeprecatedだよと教えてくれるようになりました。案内されている以下のURLにいけば詳細をみることができます。

https://sass-lang.com/documentation/breaking-changes/import/

マイグレート用に sass-migrator というパッケージが用意されているので、これで警告がでているファイルをマイグレートすれば解消できます。

$ npm install -g sass-migrator
$ sass-migrator module --migrate-deps your-entrypoint.scss

ただCSSの @import 相応の振る舞いでしか使っていなかったらこういう移行で問題ありませんが、mixinやSass変数をガリガリ使っている場合は、CSS変数の移行などちょっと書き直しを見据えてみてもいいのではないでしょうか。

それではまた。

Discussion