【Angularの環境構築とプロジェクト作成】Angular CLIがインストールできない場合も解説

Angular

どうもふみです。

仕事でAngularを使うことになったので、Angularの環境構築方法とAngularのプロジェクトを作成し実行するまでをカンタンに説明していきます。

Angular超入門』の書籍を参考に環境構築をしました。

手順は以下の通り。めっちゃラクです。

  1. Node.jsをインストール
  2. Angular CLIのインストール



Node.jsのインストール

まずはNode.jsをインストールします。

Angular は Node.js の npm というパッケージ管理ツールを使ってインストールを行います。

ちなみにぼくのMacでは標準で Ver.8.11.3 が入ってました。

 

とりあえず最新版をインストールしようということで Node.js のWebサイトで現在の推奨版をダウンロード。

インストーラーを起動したら、「続ける」「同意する」「続ける」「インストール」って感じでぽちぽちしてけば楽勝です。

結果的に推奨版をインストールに成功。ターミナルで叩くと下記のようになります。

 

Angular CLIのインストール

次は Angular CLI をインストールします。

Angularのプログラムの作成は、Angular CLI というツールを利用します。

Angular CLI はコマンドラインのプログラムで、コマンドとして実行してAngularのファイル類を作成したりするものです。

ターミナルで以下のコマンドを入力すればインストール完了です。

 

実行結果は以下の通り。途中で、Googleに統計情報を渡していい?って聞かれてます。(5行目の Would you like to 〜 analytics. の3行分のところ)

どっちでもよかったので、そのまま Enter を押したら No が選択されました。お好みでどうぞ。

 

Angular CLIがインストールされているか確認すると、

いい感じです!

Angular CLI がインストールできない場合

Angular CLIがインストールできない場合があります。ぼくの場合、エラーが出てしまいました。

出力されたエラーは以下の通り、「Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’ 」です。(7行目あたり)

対処方法を説明していきます。

Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’ のエラーの意味は、node_modules のパーミッションが許可されてへんでってことです。

 

この場合は下記のコマンドを叩きます。

 

実行結果は下記の通り。

 

/usr/local が表示されたら、以下のコマンドを実行すればOKです。これでnode_modulesディレクトリの権限が変更されます。(バージョンのアップデートしてやっていう注意文はムシで)

 

再度、先ほどのコマンドを叩けば無事にインストールできるはずです!

 

もし、/usr と表示されたら、npmでpermission deniedになった時の対処法[mac] を参考にしたので、コチラを読んでいただければと思います。

 

Angularプロジェクトの作成

プロジェクトを作成します。下記のコマンドを入力します。

 

すると、Angular routing というモジュールをインストールするか聞かれます。

デフォルトは No です。そのままEnterを押下しました。

 

次は、スタイルシートのフォーマットをどうするか聞かれます。お好みでどうぞ。ぼくはCSSを選びました。

 

実行結果は下記の通り。

プロジェクトの作成に成功しています。

 

Angularプロジェクトの実行

Angularプロジェクトを実行します。作成したプロジェクトまで移動します。

下記のコマンドを入力すると、プログラムをコンパイルし、サーバーを起動して、作成されたアプリが実行されます。

 

実行結果は下記の通り。

 

2行目にある、

にアクセスしてみましょう。

下図のようなページに飛ぶことができればOKです!

webpack-dev-server/をつけたURLにアクセスすると、ヘッダー上部に「App ready」と出力されるようです。

Angular

以上で、完了です!お疲れさまでした!



Angular

コメントを残す

ABOUTこの記事をかいた人

正社員SESエンジニア。販売と営業とせどりができます。現在は業務系のシステムを開発中。業務委託でコーポレートサイトの作成やWebアプリケーションの開発を経験。未経験からエンジニアを目指す情報発信しています。