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

はじめに

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

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

背景

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

環境

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


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

各コンポーネントでのImport

チュートリアル通りにやっているとまず初めに躓くのが
UppercasePipe で書式設定する
の部分だと思います。
記載の通りに{{hero.name | uppercase}}と入力してもエラーとなってしまいます。

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

CommonModuleはNgIf、NgForOf、DecimalPipeなどの基本的なAngularディレクティブとパイプをエクスポートするものであり、以前はapp.module.ts内にてBrowserModuleが役割を担っていたものになります。
これを各コンポーネントにてImportすることでAngularディレクティブとパイプを利用可能になります。

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を追加し、RouterModuleをエクスポートしなければいけませんでしたが、独立したファイルで管理が可能になり、下記のapp.routes.tsをmain.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に読み込ませることで利用可能になります。

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に挙げておくのでご参考まで～

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