【Angular】 Tutorial "Tour Of Heroes"  ～スタンドアロンコンポーネントと共に～

## はじめに
新卒二年目のエンジニアとして、新卒のangular研修を任せられ、私自身も初学習時利用したTour Of Heroesをやってみたところ、チュートリアル通りではうまくいかないところがあったので整理してまとめようと思います！

最新のチュートリアルで日本語対応しているものは多くないため、ぜひAngular初学者の方で興味がある方はやってみてください！

https://master--angular-ja.netlify.app/tutorial

## 背景
今回うまくいかない部分の主な原因はangularのversion15から正式採用となった「スタンドアロンコンポーネント」にチュートリアルが対応してないためでした。
(Angularのドキュメントが最新化された際に置いて行かれた感があります、、、)

## 環境

```

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 18.2.7
Node: 20.18.0
Package Manager: npm 10.8.2
OS: win32 x64
```


## 各コンポーネントでのImport

チュートリアル通りにやっているとまず初めに躓くのが
[UppercasePipe で書式設定する](https://master--angular-ja.netlify.app/tutorial/toh-pt1#uppercasepipe-%E3%81%A7%E6%9B%B8%E5%BC%8F%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)
の部分だと思います。
記載の通りに``{{hero.name | uppercase}}``と入力してもエラーとなってしまいます。

ここで必要なのが``CommonModule``のImportになります。

[``CommonModule``](https://angular.jp/api/common/CommonModule)はNgIf、NgForOf、DecimalPipeなどの基本的なAngularディレクティブとパイプをエクスポートするものであり、以前はapp.module.ts内にて``BrowserModule``が役割を担っていたものになります。
これを各コンポーネントにてImportすることでAngularディレクティブとパイプを利用可能になります。
```ts:heroes.component.ts
import { Component } from '@angular/core';
import { Hero } from '../../interface/hero';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-heroes',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './heroes.component.html',
  styleUrl: './heroes.component.css'
})
export class HeroesComponent {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}
```
必要なものだけimportするのがスタンドアロンコンポーネントの基本です！
モジュールだけでなく、コンポーネントも同じ要領で必要なコンポーネントでのみImportします！

## ルーティングの設定
``app.module.ts``が必要なくなったことで、より記載が簡単になったのが、ルーティングの設定です。
以前は[AppRoutingModuleを追加](https://master--angular-ja.netlify.app/tutorial/toh-pt5#approutingmodule%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)し、RouterModuleをエクスポートしなければいけませんでしたが、独立したファイルで管理が可能になり、下記の``app.routes.ts``を``main.ts``に読み込ませるだけで、設定完了になります。

``` ts:app.routes.ts
import { Routes } from '@angular/router';
import { HeroesComponent } from './view/heroes/heroes.component';

export const routes: Routes = [
    { path: 'heroes', component: HeroesComponent },
    { path: '', redirectTo: 'heroes', pathMatch: 'full' }
];
```

##  In-memory Web APIの設定

スタンドアロンコンポーネントにより、app.module.tsが消えたことで設定場所が変わったのが、「In-memory Web API」です。
以前までは、app.module.tsのimportに設定を追加すればよかったのですが、``app.config.ts``の設定ファイルに書き込み、``main.ts``に読み込ませることで利用可能になります。


```ts:app.config.ts
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './service/in-memory-data.service';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    importProvidersFrom(InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 500 })),
    provideRouter(routes),
  ]
};
```
注意点としては、``provideHttpClient()``は``importProvidersFrom``の前に来ないといけません。


## 実際のコード
実際に私が書いたコードGitHubに挙げておくのでご参考まで～

各章の終わりでブランチ切ってマス！

https://github.com/Kota-Kota-No2/TourOfHeros