プログラミング ふみ

【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 が入ってました。

1
2
$ node --version
v8.11.3

 

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

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

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

1
2
$ node --version
v10.16.3

 

Angular CLIのインストール

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

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

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

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

1
$ npm install -g @angular/cli

 

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

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

1
2
3
4
5
6
7
8
9
10
11
$ npm install -g @angular/cli
/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng
 
> @angular/cli@8.3.3 postinstall /usr/local/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js
 
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. No
+ @angular/cli@8.3.3
added 243 packages from 185 contributors in 69.743s

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$ ng --version
 
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    
 
Angular CLI: 8.3.3
Node: 10.16.3
OS: darwin x64
Angular:
...
 
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.3
@angular-devkit/core         8.3.3
@angular-devkit/schematics   8.3.3
@schematics/angular          8.3.3
@schematics/update           0.803.3
rxjs                         6.4.0

いい感じです！

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$ npm install -g @angular/cli
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).
 
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/fumi/.npm/_logs/2019-09-07T04_25_40_210Z-debug.log
Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’ のエラーの意味は、node_modules のパーミッションが許可されてへんでってことです。

 

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

1
$ npm config get prefix

 

実行結果は下記の通り。

1
2
3
4
5
6
7
8
9
10
11
12
$ npm config get prefix
/usr/local
 
 
   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │       New minor version of npm available! 6.9.0 → 6.11.3       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.11.3   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯
 

 

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

1
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

 

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

1
npm install -g @angular/cli

 

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

 

Angularプロジェクトの作成

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

1
$ ng new プロジェクト名

 

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

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

1
? Would you like to add Angular routing

 

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

1
2
3
4
5
6
? Which stylesheet format would you like to use?
❯ CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ http://stylus-lang.com                                         ]

 

実行結果は下記の通り。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
$ ng new angular-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE angular-app/README.md (1027 bytes)
CREATE angular-app/.editorconfig (246 bytes)
CREATE angular-app/.gitignore (631 bytes)
CREATE angular-app/angular.json (3633 bytes)
CREATE angular-app/package.json (1285 bytes)
CREATE angular-app/tsconfig.json (543 bytes)
CREATE angular-app/tslint.json (1988 bytes)
CREATE angular-app/browserslist (429 bytes)
CREATE angular-app/karma.conf.js (1023 bytes)
CREATE angular-app/tsconfig.app.json (270 bytes)
CREATE angular-app/tsconfig.spec.json (270 bytes)
CREATE angular-app/src/favicon.ico (948 bytes)
CREATE angular-app/src/index.html (296 bytes)
CREATE angular-app/src/main.ts (372 bytes)
CREATE angular-app/src/polyfills.ts (2838 bytes)
CREATE angular-app/src/styles.css (80 bytes)
CREATE angular-app/src/test.ts (642 bytes)
CREATE angular-app/src/assets/.gitkeep (0 bytes)
CREATE angular-app/src/environments/environment.prod.ts (51 bytes)
CREATE angular-app/src/environments/environment.ts (662 bytes)
CREATE angular-app/src/app/app.module.ts (314 bytes)
CREATE angular-app/src/app/app.component.css (0 bytes)
CREATE angular-app/src/app/app.component.html (25498 bytes)
CREATE angular-app/src/app/app.component.spec.ts (996 bytes)
CREATE angular-app/src/app/app.component.ts (215 bytes)
CREATE angular-app/e2e/protractor.conf.js (810 bytes)
CREATE angular-app/e2e/tsconfig.json (214 bytes)
CREATE angular-app/e2e/src/app.e2e-spec.ts (644 bytes)
CREATE angular-app/e2e/src/app.po.ts (262 bytes)
 
> fsevents@1.2.9 install /Users/fumi/Desktop/angular-app/node_modules/@angular/compiler-cli/node_modules/fsevents
> node install
 
node-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "/Users/fumi/Desktop/angular-app/node_modules/@angular/compiler-cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
 
> fsevents@1.2.9 install /Users/fumi/Desktop/angular-app/node_modules/karma/node_modules/fsevents
> node install
 
node-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "/Users/fumi/Desktop/angular-app/node_modules/karma/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
 
> fsevents@1.2.9 install /Users/fumi/Desktop/angular-app/node_modules/watchpack/node_modules/fsevents
> node install
 
node-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "/Users/fumi/Desktop/angular-app/node_modules/watchpack/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
 
> fsevents@1.2.9 install /Users/fumi/Desktop/angular-app/node_modules/webpack-dev-server/node_modules/fsevents
> node install
 
node-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "/Users/fumi/Desktop/angular-app/node_modules/webpack-dev-server/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
 
> core-js@2.6.9 postinstall /Users/fumi/Desktop/angular-app/node_modules/babel-runtime/node_modules/core-js
> node scripts/postinstall || echo "ignore"
 
 
> core-js@3.2.1 postinstall /Users/fumi/Desktop/angular-app/node_modules/core-js
> node scripts/postinstall || echo "ignore"
 
 
> core-js@2.6.9 postinstall /Users/fumi/Desktop/angular-app/node_modules/karma/node_modules/core-js
> node scripts/postinstall || echo "ignore"
 
 
> @angular/cli@8.3.3 postinstall /Users/fumi/Desktop/angular-app/node_modules/@angular/cli
> node ./bin/postinstall/script.js
 
added 1457 packages from 1071 contributors and audited 18838 packages in 41.618s
found 0 vulnerabilities
 
    Successfully initialized git.

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

 

Angularプロジェクトの実行

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

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

1
$ ng serve

 

実行結果は下記の通り。

1
2
3
4
5
6
7
8
9
10
11
12
13
$ ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
 
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.71 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-09-07T06:54:47.366Z - Hash: a19a19f247d0bf229689 - Time: 7706ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

 

2行目にある、

1
http://localhost:4200/webpack-dev-server/

か

1
http://localhost:4200/

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

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

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

Angular

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



Angular

コメントを残す

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

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

NEW POSTこのライターの最新記事