1
0

WindowsでのAngular環境構築(Node.jsのインストール~Hello Worldまで)

Posted at

Node.jsのダウンロード

以下サイトで最新バージョンのダウンロード。
https://nodejs.org/en/download

Windowsの一番上をポチっと。

Node.jsのインストール

画面に従いNextを押下していく。
※今回はすべてデフォルト。

バージョンとnpmの確認

コマンドプロンプトで以下のコマンドで確認できる。

Node --version
npm --version

◆参考
https://kinsta.com/jp/blog/how-to-install-node-js/#4-nodejs

Angularの最新をインストール

以下のコマンドを実行する。

npm install -g @angular/cli
ng version //確認

バージョンはこの通り。

Angular CLI: 17.2.2
Node: 20.11.1
Package Manager: npm 10.2.4
OS: win32 x64

統合開発環境(IDE)のインストール

Visual Studio Codeを使用。
以下からインストール。
https://code.visualstudio.com/docs/?dv=win64user
推奨されているのでAngular Language Serviceもインストールしておく。
https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

ワークスペース作成

任意のディレクトリで以下のコマンドを実行。

ng new my-app

Angularアプリケーションのテスト

ワークスペースに移動する。

cd my-app

開発サーバーを起動する。

ng serve

ローカル環境(http://localhost:4200/)にアクセス!

image.png

動作していることを確認できた。

※停止はCtrl + c

Hello Worldへ修正

以下のレッスン1を実施。
https://angular.jp/tutorial/first-app/first-app-lesson-01

image.png

簡単にHello worldを出力できた。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0