🐣

Angularの公式チュートリアルをやっていく　その２ - Hello world

2023/06/11に公開

Angular

Angularの公式チュートリアル「はじめての Angularアプリ」を進めていきます。

今回やるのは、↓の部分です。

スターターコードをダウンロードする

download exampleをクリックして、公式が用意してくれているチュートリアル用のコードをダウンロードします。↓

ダウンロードできました。↓

できたら、フォルダを解凍してwindows内の適当な位置に配置します。

そして、チュートリアル通りにするなら、コードが入っているフォルダをfirst-app-lesson-00からfirst-appに変更した方が良いのだろうか？
~~分からないので取り敢えずこのままでいきます。~~
変更することにしました。

npmインストール

そうしたら、コマンドプロンプトやvscodeのターミナルなどでfirst-app-lesson-00フォルダまで移動して、npmインストールを行います。

npm install

Enterで実行。

~~おっと、エラーを吐きました。~~
後日、このエラーの原因が修正されていました。（この記事を投稿してからすぐにGithubの日本語化プロジェクトに修正が行われていたので、即座に直して下さったぽいです。ありがとうございます）

どんなエラーが起こっていたのかは、こちらのプルダウンをご覧ください↓。

修正済みエラーの経緯

おっと、エラーを吐きました。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: angular.io-example@0.0.0
npm ERR! Found: @angular/common@16.0.5
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^16.0.0" from the root project
npm ERR! peer @angular/common@"^15.0.0" from angular-in-memory-web-api@0.15.0
npm ERR! node_modules/angular-in-memory-web-api
npm ERR!   angular-in-memory-web-api@"~0.15.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.   

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Local\npm-cache\_logs\2023-06-10T14_19_26_269Z-debug-0.log

エラーの解決方法

調べてみたところ、どうやらライブラリの依存関係が上手くいかない為に出たエラーのようです。

@angular/common@16.0.5でAngularの16.0.5バージョンを使おうとしたところ、angular-in-memory-web-api@0.15.0と、こちらではAngularの15.0.XXバージョンを求めていたことが原因のようですね。

package.jsonを確認すると、確かにそのような設定がされています。

package.json

{
  "name": "angular.io-example",
  "version": "0.0.0",
  "description": "Example project from an angular.io guide.",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.0.0",
    "@angular/common": "^16.0.0",  // ここ
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/forms": "^16.0.0",
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/router": "^16.0.0",
    "angular-in-memory-web-api": "~0.15.0",  // ここ
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.0.0",
    "@angular/cli": "^16.0.0",
    "@angular/compiler-cli": "^16.0.0",
    "@types/jasmine": "~4.3.0",
    "@types/node": "^16.11.35",
    "copyfiles": "^2.4.1",
    "jasmine-core": "~4.6.0",
    "jasmine-marbles": "~0.9.2",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~10.9.0",
    "typescript": "~4.9.3"
  }
}

たぶん、package.jsonを下記のように変えればうまくいくはず。

package.json

-    "angular-in-memory-web-api": "~0.15.0",
+    "angular-in-memory-web-api": "~0.16.0",

しかし、私の場合はAngularの公式チュートリアル英語版の方で改めてdownload exampleをダウンロードして使用することにしました。↓

こちらの方はpackage.jsonがちゃんと"angular-in-memory-web-api": "~0.16.0"になっていますし、日本語版の方のコードが他にも間違っている箇所があったら嫌なので……
（有志による日本語化は、やはりどこかしらにミスがある事もあるようですね）

改めてnpm installをすると、今度は上手くいきました。

npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated protractor@7.0.0: We have news to share - Protractor is deprecated and wil//goo.gle/state-of-e2e-in-angular

added 1098 packages, and audited 1099 packages in 2m

105 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

上手くいったようです。

npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated protractor@7.0.0: We have news to share - Protractor is deprecated and wil//goo.gle/state-of-e2e-in-angular

added 1098 packages, and audited 1099 packages in 2m

105 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

ng serveする

つぎに下記コマンドを実行します。

ng serve

すると、下記のようなメッセージが

? Would you like to share pseudonymous usage data about this project 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 https://angular.io/analytics. (y/N)

翻訳するとこんな感じです。

「このプロジェクトについての匿名利用データを、Googleのプライバシーポリシー(https://policies.google.com/privacy)の下でGoogleのAngularチームと共有しますか？詳細やこの設定の変更方法については、https://angular.io/analytics を参照してください。」

つまり、GoogleのAngular開発チームに匿名で私がどのようなコマンドを使うかや、どのようなエラーに遭遇したかを送信してもいいかを尋ねるものですね。そしてそれを元にAngularを改善していくと。

よくあるやつです。

私はyesにしておきます。
他の方がどうするかは状況に応じて選択してください。

するとビルドが行われて、http://localhost:4200/ にアクセスすると下記がブラウザに表示されました。

上手くできたみたいです。

Hello worldを表示する

ではついに、Hello worldを表示させていこうと思います。
チュートリアルに従って、index.htmlとapp.component.tsに修正を加えます。

index.html

 <!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Default</title>
+  <title>Homes</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
 </body>
 </html>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
- template: `<h1>Default</h1>`,
+ template: `<h1>Hello world!</h1>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
-  title = 'default';
+  title = 'homes';
}

すると、確かに画面表示がDefaultからHello world!になって、タブのタイトルもDefaultからHomesに変わっています。

これにてHello worldは完了です。

←　前へ　Angularの公式チュートリアルをやっていく　その１ - Introduction
→　次へ　Angularの公式チュートリアルをやっていく　その３ - Create home component

スターターコードをダウンロードする

npmインストール

エラーの解決方法

ng serveする

Hello worldを表示する

Discussion