どうもふみです。
仕事でAngularを使うことになったので、Angularの環境構築方法とAngularのプロジェクトを作成し実行するまでをカンタンに説明していきます。
『Angular超入門』の書籍を参考に環境構築をしました。
手順は以下の通り。めっちゃラクです。
- Node.jsをインストール
- 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 |
この場合は下記のコマンドを叩きます。
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」と出力されるようです。

以上で、完了です!お疲れさまでした!
コメントを残す