♦️

Windows10にAngularプロジェクトを作成する

2021/11/18に公開

2021年11月18日時点のWindows10での情報です。
今回はWindows10環境に、Angularプロジェクトを作成していきます。

前回までの記事で、Node.jsのインストールまで済んでいる状態です。

また、Windows10にAngular環境を作成するでグローバル環境にAngular CLIをグローバルインストールする方法を試してみました。
しかし、実際のプロジェクトではプロジェクト単位でインストールするパッケージやバージョンが異なります。
通常はAnular CLIもローカルインストールします。

今回はAnular CLIをローカルインストールして、Angularプロジェクトを作成していきます。

Angularプロジェクトフォルダを作成

まずはプロジェクトフォルダを作成します。
どこでもいいですが、とりあえず以下のフォルダにプロジェクトを作成していくことにします。

E:¥Workspace¥angular-service

Angular CLIをローカルインストール

コマンドプロンプトを起動し、以下のコマンドでangular-serviceフォルダまで移動します。

e:
cd workspace\angular-service

または、エクスプローラーでangular-serviceフォルダを開き、アドレスバーに「cmd」と入力すると、開いているフォルダをカレントフォルダにしてコマンドプロンプトが起動します。

このフォルダにAngular CLIをローカルインストールします。

npm i @angular/cli

Voltaを使用している場合は、Windowsの開発者モードをONにしておかないと、
Angular CLI のインストールで、エラーが発生します。
詳しくはコチラ
Windows10にAngular環境を作成する

angular-serviceフォルダに、node_modulesフォルダ、package.json、package-lock.jsonファイルが作成されます。

動作確認として、以下のコマンドでインストールされたパッケージのバージョンを確認してみます。

npx ng --version

Windows10にAngular環境を作成するで、Angular CLIをグローバルインストールした際は、「ng --version」でAngular CLIのバージョン確認しました。
Angular CLIをローカルインストールした場合は「npx ng --version」でAngular CLIのバージョン確認を行います。

npxとは

npxはローカルにインストールしたパッケージのコマンドを実行できるツールです。
今回はAngular CLIをローカルインストールしたので、Angular CLIのngコマンドを実行する時に使います。

npxはnpmパッケージに付随しているツールです。
コマンドプロンプト起動し、以下のコマンドでバージョンを確認できます。

npx -version
npx -v

npmをインストールしていればnpxも使用できるはずです。
Nodist(Node.jsのバージョン管理ツール）を使用してNode.jsをインストールしたときは、npmはインストールされたのですが、npxはインストールされませんでした。
npxがインストールされていないときは、以下のコマンドでグローバルインストールすると、使用できるようになります。

npm install -grobal npx
npm i -g npx

Angularプロジェクトを作成

angular-serviceフォルダにAngularプロジェクトを作成します。
Angularプロジェクト作成コマンドを実行すると「A merge conflicted on path "./package.json".（package.jsonが競合しているよ）」とエラーが発生します。

競合を解決するためにpackage.jsonファイルを削除します。
エクスプローラから削除してもいいですし、コマンドプロンプトからはdelコマンドで削除します。

del package.json

angular-serviceフォルダをカレントフォルダにしたまま、コマンドプロンプトで以下のコマンドを実行します。

npx ng new --direcoty=./

パッケージ名を聞かれますので、入力します。
今回は「angular-service」と入力しました。

? What name would you like to use for the new workspace and  initial project?

ルーティングを使用するか聞かれますので、y(使用する）まはたn(使用しない）を入力します。
ページ遷移でルーティング機能を使用する場合はyを選択します。

? Would you like to add Angular routing?

スタイルシートの種類を聞かれますので、CSS, SCSS, SASS, Less, Stylus から選択します。

? which stylesheet format would you like to use?

プロジェクトの作成は成功しますが、
「'git'は、内部コマンドまたは外部コマンド、操作可能なプログラムまたは、バッチファイルとして認識されていません。」と表示されます。

「ng new」コマンドでAngularプロジェクトを作成するときに、Gitのリポジトリも作成してくれるようです。
後で追加できますので、今は無視しておきます。

「ng new」コマンドのその他のオプションは、以下のコマンドで確認できます。

npx ng new --help

以下のようにnewコマンドのオプションで、まとめて指定することもできます。

npx ng new angular-service --direcoty=./ --routing=true --style=scss　--skip-git=true

Angularプロジェクトの動作確認

Angularプロジェクトが作成できたら、VsCodeでプロジェクトを起動します。
エクスプローラーから、作成したプロジェクトのフォルダをVSCodeで開くか、以下のコマンドでカレントディレクトリをVSCodeを起動します。

code -n .

VsCodeのターミナルウィンドウを表示します。
表示されていない場合は「Ctrl + @」で表示します。

VsCodeのターミナルウィンドウで「ng serve」コマンドを入力し、開発用の簡易サーバーでAngularアプリを起動します。

npx ng serve --open
npx ng s -o

以下の画面が表示されれば成功です。

実行中の簡易サーバーは、VsCodeのターミナルで「ctrl + c」を入力して停止します。