初めまして！
普段はしがないSESとしてフロント業務を行っているタンクと申します。
初めての投稿で分かりにくい文章があるかと思いますが、angularを触っていた案件で学んだことをアウトプットしていければなぁと思います。当記事はangularというよりangular materialの記述に比重が偏っています。
なぜかって？・・・レイアウト修正に苦労してその分メッチャ調べたからです・・・
angular V17のアップデートについて
angularのバージョンをv17以降にアップする作業について、以下の公式サイトに則って作業をする必要があるかと思います。
しかし現実には、上記サイトに取っている対応だけではどうにもならない問題があると思います。
angular v17以前からv17にバージョンアップした場合、すぐに気づくと思いますが、v17は以前のバージョンより結構変わっていると思います。
上記リンクに色々と書かれていますが、私がいた現場で行った対応のほとんどが
*ngIf → @if
*ngSwitch → @switch
*ngFor → @for
とかでした。
また、現場によっては明示的に処理を記載していない現場も多い事でしょう。そんな現場ではv17にした途端、ビルドエラーが発生するはずです。
どうやらangular V17に至るまでのバージョンで明示的ではないコードに対してビルドエラーが発生するようになるとの事です。もしそうなっている場合、明示的に処理を変更する必要があるかと思います。
angular material V17について
レイアウトでangular materialを使用しているプロジェクトでは今回のバージョンアップでレイアウトが木端微塵に破壊されている事に絶望するかもしれません。
なぜこのような事態になっているのか？
それは、angular materialで使用しているmat-dialogが勝手にmat-mdc-dialogに代わっているからです。
mdcとは「material component web」の略称で、以前のangularでは適応されていなかったコンポーネントです。
この変更のおかげで開発者ツールから適応されているCSSを探そうにも、以前のバージョンと違い、大量の意図しないCSSが20個～30個ぐらい適応されていて本当に修正する箇所がどこなのか分からなくなっているはずです。この場合、以下のいずれかの修正方法を行ってください
【方法１：機能に適応されているCSSの要素内にいらないCSS設定を打ち消すセレクターを追加する】
・この方法で作業をする場合、まず悪さをしているmdc由来のセレクターを探します。見つけたセレクターの名前を修正したい機能に適応されているCSSファイルに記載して、スタイルを打ち消す構文を書く方法です。提示している修正方法の中で一番被害が少なく、かつ安全な作業です
【方法2：style.cssとかが記載されてる共通部品に対して、適応されているmdc由来のセレクターを追加して打ち消す】
・この方法は全ファイルで共有されているcssを書き換えることになるのでお勧めはしません。
しかし、修正するレイアウトによっては共通のcssファイルを参照しているものも多いと思います。その場合は他の意図しない機能にスタイルの変更が適応されていないか確認しつつ修正する必要があります。(この修正を行ったことによる横確認に時間を費やすので注意してください)
【方法3：style.cssに記載されてる共通部品に対して、適応されているmdc由来の設定を強制的に追加して打ち消す】
・この方法はcssのスタイル適応を強制するためのものなのでおススメはできません。現場でも(コードに詳しくない人がいない環境を除いて)反対される対応なので、それ相応の理由がある場合にのみ、この方法を試してみてください。
この方法はmdc由来の処理が要らない場合、機能のcssファイルに対して、! importantやng-deepを使ってスタイルを強制する方法です。特にng-deepはangular公式から非推奨らしいので使用には十分に注意する事。