Angularプロジェクトのインストールと実行完全ガイド

この記事では、ゼロからAngular開発環境を構築する方法を詳細に紹介します。Node.jsのインストール、Angular CLIの設定、プロジェクトの実行、およびパッケージ化を含みます。

1. Node.jsとnpmのインストールと設定

1.1 ローカルにNode.js環境がない場合

Windowsシステムへのインストール

方法1：公式インストーラーを使用（推奨）

1. Node.js公式サイトにアクセス
2. LTS（長期サポート版）をダウンロード、現在は18.xまたは20.xが推奨
3. インストーラーを実行し、デフォルト設定でインストール
4. インストールの確認：

node --version
npm --version

方法2：NVM（Node Version Manager）を使用

# 1. NVM for Windowsをダウンロードしてインストール
# https://github.com/coreybutler/nvm-windows/releases にアクセス

# 2. インストール後、指定バージョンのNode.jsをインストール
nvm install 18.17.0
nvm use 18.17.0

# 3. インストールの確認
node --version

macOSシステムへのインストール

Homebrewを使用：

# 1. Homebrewをインストール（未インストールの場合）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 2. Node.jsをインストール
brew install node

# 3. インストールの確認
node --version
npm --version

NVMを使用（推奨）：

# 1. NVMをインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 2. ターミナルを再読み込みまたは実行
source ~/.bashrc

# 3. 指定バージョンのNode.jsをインストール
nvm install 18
nvm use 18

# 4. デフォルトバージョンを設定
nvm alias default 18

Linuxシステムへのインストール

Ubuntu/Debian：

# 1. NodeSourceリポジトリを使用
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# 2. インストールの確認
node --version
npm --version

CentOS/RHEL：

# 1. NodeSourceリポジトリを使用
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

1.2 既存のNode.js環境のアップグレード方法

NPMを使用したNode.jsのアップグレード

Windows：

# npmのnodeバージョン管理ツールをインストール
npm install -g n

# 最新のLTSバージョンにアップグレード
n lts

# または指定バージョンにアップグレード
n 18.17.0

macOS/Linux（NVMを使用）：

# インストール済みバージョンを表示
nvm ls

# 新しいバージョンをインストール
nvm install 18.17.0

# バージョンを切り替え
nvm use 18.17.0

# デフォルトバージョンを設定
nvm alias default 18.17.0

インストーラーを直接ダウンロードして上書きインストール

Node.js公式サイトから最新のインストーラーをダウンロードし、直接インストールするだけで古いバージョンを上書きできます。

2. Angular CLIのインストールと設定

2.1 Angular CLIのグローバルインストール

# 最新バージョンをインストール
npm install -g @angular/cli

# インストールの確認
ng version

2.2 Node.jsバージョンに基づいた特定バージョンのAngular CLIインストール

重要：バージョン互換性対応表

Angularバージョン	Node.jsバージョン要件	Angular CLIバージョン
Angular 16	16.x / 18.x	16.x
Angular 15	14.20.x / 16.13.x / 18.10.x	15.x
Angular 14	14.15.x / 16.13.x	14.x
Angular 13	12.20.x / 14.15.x / 16.10.x	13.x

特定バージョンのAngular CLIをインストール：

# 利用可能なAngular CLIバージョンを表示
npm view @angular/cli versions --json

# 指定バージョンをインストール
npm install -g @angular/cli@16.2.0

# またはメジャーバージョンの最新をインストール
npm install -g @angular/cli@16

2.3 バージョン互換性のチェックと処理

現在の環境互換性をチェック：

# Node.jsバージョンをチェック
node --version

# npmバージョンをチェック
npm --version

# Angular CLIバージョンをチェック
ng version

バージョン互換性の問題が発生した場合：

# 1. 現在のAngular CLIをアンインストール
npm uninstall -g @angular/cli

# 2. npmキャッシュをクリーンアップ
npm cache clean --force

# 3. 互換性のあるバージョンをインストール
npm install -g @angular/cli@^16.0.0

3. Angularプロジェクトの作成と実行

3.1 新しいプロジェクトの作成

# Angular CLIを使用して新しいプロジェクトを作成
ng new my-angular-app

# 作成プロセス中のオプション設定：
# ✅ Would you like to add Angular routing? (y/N) 
# ✅ Which stylesheet format would you like to use? (CSS/SCSS/Sass/Less)

高度な作成オプション：

# ルーティングとスタイルプリプロセッサを指定
ng new my-angular-app --routing --style=scss

# 依存関係のインストールをスキップ（ネットワーク環境が悪い場合）
ng new my-angular-app --skip-install

# その後手動で依存関係をインストール
cd my-angular-app
npm install

3.2 開発サーバーの実行

基本的な実行：

cd my-angular-app
ng serve

アクセス：http://localhost:4200

ポートを指定して実行：

# ポート番号を指定
ng serve --port 4300

# または省略形を使用
ng serve -p 4300

# ホストも同時に指定（外部アクセスを許可）
ng serve --host 0.0.0.0 --port 4300

# ブラウザを自動で開く
ng serve --open --port 4300
# または省略形
ng serve -o -p 4300

その他のよく使われる実行パラメータ：

# ホットリロードを有効化（デフォルトで有効）
ng serve --live-reload

# ホットリロードを無効化
ng serve --no-live-reload

# SSLを使用
ng serve --ssl

# SSL証明書を指定
ng serve --ssl --ssl-key ./key.pem --ssl-cert ./cert.pem

3.3 カスタム起動スクリプトの設定

package.jsonにカスタムスクリプトを追加：

{
  "scripts": {
    "start": "ng serve --port 4300 --open",
    "start:dev": "ng serve --port 4300 --configuration=development",
    "start:test": "ng serve --port 4400 --configuration=test",
    "start:prod": "ng serve --port 4500 --configuration=production"
  }
}

カスタムスクリプトを使用して実行：

npm run start          # ポート4300、ブラウザ自動起動
npm run start:test     # ポート4400、テスト環境設定

4. プロジェクトのパッケージ化と環境設定

4.1 環境設定ファイル

Angularはマルチ環境設定をサポートしており、デフォルトの構造は以下の通り：

src/
├── environments/
│   ├── environment.ts          # 開発環境（デフォルト）
│   ├── environment.development.ts # 開発環境
│   ├── environment.test.ts     # テスト環境
│   └── environment.production.ts # 本番環境

環境設定ファイルの例：

environment.ts（開発環境デフォルト）：

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
  appVersion: '1.0.0',
  enableDebug: true
};

environment.development.ts：

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
  appVersion: '1.0.0-dev',
  enableDebug: true
};

environment.test.ts：

export const environment = {
  production: false,
  apiUrl: 'https://test-api.example.com/api',
  appVersion: '1.0.0-test',
  enableDebug: true
};

environment.production.ts：

export const environment = {
  production: true,
  apiUrl: 'https://api.example.com/api',
  appVersion: '1.0.0',
  enableDebug: false
};

4.2 Angular.jsonの環境設定

angular.jsonでビルドオプションを設定：

{
  "projects": {
    "my-angular-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "configurations": {
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ]
            },
            "test": {
              "buildOptimizer": true,
              "optimization": true,
              "vendorChunk": false,
              "extractLicenses": true,
              "sourceMap": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ]
            },
            "production": {
              "buildOptimizer": true,
              "optimization": true,
              "vendorChunk": false,
              "extractLicenses": true,
              "sourceMap": false,
              "namedChunks": false,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.production.ts"
                }
              ]
            }
          }
        }
      }
    }
  }
}

4.3 パッケージ化コマンド

開発環境のパッケージ化：

# 開発環境ビルド（最適化なし）
ng build

# 明示的に開発環境を指定
ng build --configuration=development

# ソースマップファイルを含め、デバッグを容易に
ng build --source-map=true

テスト環境のパッケージ化：

# テスト環境ビルド
ng build --configuration=test

# 出力パスを指定
ng build --configuration=test --output-path=dist/test

本番環境のパッケージ化：

# 本番環境ビルド（デフォルト）
ng build --configuration=production

# または省略形
ng build --prod

# ビルド分析を有効化
ng build --prod --stats-json

# その後webpack-bundle-analyzerを使用して分析
npx webpack-bundle-analyzer dist/my-angular-app/stats.json

4.4 高度なパッケージ化設定

カスタム出力パス：

ng build --output-path=dist/production-build

マルチ環境並列設定：
package.jsonでビルドスクリプトを設定：

{
  "scripts": {
    "build": "ng build",
    "build:dev": "ng build --configuration=development",
    "build:test": "ng build --configuration=test --output-path=dist/test",
    "build:prod": "ng build --configuration=production --output-path=dist/prod",
    "build:analyze": "ng build --prod --stats-json && npx webpack-bundle-analyzer dist/my-angular-app/stats.json"
  }
}

異なるベースパスを使用：

# アプリケーションがサブパスにデプロイされる場合
ng build --base-href=/my-app/

5. よくある問題と解決策

5.1 ポートが使用中

# ポートを使用しているプロセスを検索
netstat -ano | findstr :4200  # Windows
lsof -i :4200                 # macOS/Linux

# または他のポートを直接使用
ng serve --port 4201

5.2 権限の問題（macOS/Linux）

# グローバルインストールの権限問題を解決
sudo npm install -g @angular/cli

# またはnpmグローバルディレクトリの権限を変更
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

5.3 キャッシュのクリーンアップ

# Angular CLIキャッシュをクリーンアップ
ng cache clean

# npmキャッシュをクリーンアップ
npm cache clean --force

# node_modulesを削除して再インストール
rm -rf node_modules
npm install

まとめ

この記事の手順を通じて、以下のことができるようになります：

1. ✅ Node.js環境を正しくインストール・設定
2. ✅ 適切なバージョンのAngular CLIをインストール
3. ✅ Angularプロジェクトを作成・実行
4. ✅ マルチ環境を設定し、パッケージ化・デプロイ