新たにAngularを勉強してみようとした時に、躓いたところをメモとして残しておこうと思います。
サイトや本ではプロジェクトを作った際、app.module.tsが初期ファイルとして作られるとのこと。
ng new app-demo早速上記コマンドを叩いて、プロジェクト作成っと..ってあれ？
app.module.tsのファイルが無い？なんで？サイトや本では必ず出来ると書いているのに
Angularのバージョンも最新のものそう、、
結論
最新（2024/03時点)のAngularではstandalonコンポーネントがある為、NgModuleが記載されているapp.module.tsは作成されなくなったと思います。
Angular公式ドキュメントにそれらしい記載があった為、おそらく合っていると思われます。
（Angular – スタンドアロンコンポーネント入門）
以下からその結論に至ったプロセスを記載します。
app.module.tsとはなんぞ
そもそもapp.module.tsは何者？
調べてみると「＠NgModule」を内包するファイルみたいですね。
＠NgModuleにdeclarationsやbootstrapなどを定義してAppComponentでそれらを設定するもの見たい…
ん？つまり下記流れってこと？
①app.module.tsの＠NgModuleで色々定義（export class AppModuleで他でも使えるようにしておく）
②AppComponentで①を使う
③それらを駆使しアプリ開発
ふむふむ何となくわかってきました。
え、でも今回新規プロジェクト作成したらapp.module.tsが無かったけど、それでもローカルホストで立ち上げ出来たのはなんでだろう？
調べていくとstandaloneというコンポーネントが関係ありそうでした。
standaloneとは
詳しくは下記記事参照いただくのが一番早いと思います。
Angularは15から使うべき８つの理由（始めよう、スタンドアロンコンポーネント） #JavaScript – Qiita
ざっくりまとめるとstandaloneコンポーネントを使用することで汎用モジュールであるapp.module.tsに依存する必要が無くなり、軽量化を実現したとのことです。（他にも色々いいことがあるみたい）
はぁぁなるほど、だからapp.module.tsは無くなったのですね。
バージャンが古いと思ってAngularを入れ直したり、自分でapp.module.tsを作ったりして２時間ぐらい消失した自分って…
下記自分でapp.module.tsを作ってAppComponentを宣言出来ず焦っている残念な人の図
まとめ
今回学ぶべき私の教訓は「公式ドキュメント読め」ですね。
環境構築系の記事を他の皆さんが書かれていてそれを参考にするのもいいけど、それが最新とは限らないので公式ドキュメントを見つつ、自分で考えて進めていくようにします。
こんな調子でアプリ作成出来るのかな…
また躓き箇所あれば備忘録としてメモしていこうと思います。
こんなところで躓く人はあまりいないと思いますが、少しでも参考になれば嬉しいです。
コメント