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

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

新規で Angular のプロジェクトを作るときは `@angular/create` が便利

はじめに

これは Angular Advent Calendar 2024 8 日目を代わりに投稿した記事です。

新規で Angular プロジェクトを作るときのコマンドは?

突然だが、新規で Angular のプロジェクトを作るときどんなコマンドを実行するだろうか?公式ドキュメントを見ると次の手順が案内されている。

npm install -g @angular/cli
ng new <project-name>

まず、Angular CLI をグローバルインストールし、これによって使えるようになる ng コマンドでプロジェクトを作るというステップである。

しかし、個人的にはなんでもグローバルにインストールすることに抵抗がある。 あくまで not for me なだけだが、同じように考える人は少なくないのではないだろうか?

代替案として下記を使っていたこともある。

npx @angular/cli@latest new <project-name>

しかし、そんな回りくどい方法を取らなくても公式が提供する @angular/create を使うことで簡単に作成できるので、今回はそちらを紹介する。

@angular/create とは

angular-cli/packages/angular/create/README.md at 19.0.6 · angular/angular-cli · GitHub

ドキュメントを見ると Angular CLI をグローバルにインストールすることなく、Angular CLI ワークスペースを作ると書いてある。つまりこれが本当に欲しかったものである。

使い方もドキュメントに書いてあるとおりで、次のコマンドを実行するだけでよい。

npm init @angular@latest <project-name>

さらに @angular/create は npm だけでなく yarn や pnpm, bun にまで対応している。どの環境でも手軽に始められることがわかる。

npm のときだけ init を使うようにドキュメントには書かれているがエイリアスが用意されているため、他のパッケージマネージャーと同様に create を使っても問題なく動作する。

npm-init について

気づいた方もいるかも知れないが、npm init xxx または npm create xxx というインストール手順は Angular だけのものではない。 これは npm-init という仕組みの上で成り立っている。npm-init については公式ドキュメントを読むほうが早いので、そちらに譲ることとする。

npm-init | npm Docs

この仕組みの上で動作するための @angular/create がちゃんと公式から提供されているというお話である。

さいごに

このパッケージがリリースされたのは実は 2 年も前である。

しかし、公式ドキュメントからたどり着くのが難しいためここで紹介してみた。 新しく v19 で Angular アプリケーションを作ってみようと思っている人はぜひ使ってみてはいかがだろうか?