AngularのProviderへの理解について
今日はAngularのProviderについて書いていきます。
HttpClient使おうとするとエラーになる件について
まずはこのコンソールに出力されたエラーログを見てほしい。
Angular初心者の私はライブラリのサービスの使い方を全く理解しておらず、というかAngularの設計思想なども知らない状態だったのでこのエラーに直面して取り合えず以下の文でググった。
NullInjectorError: No provider for _HttpClient! angular 17
するとこのページがヒット
解答を読んでみるとapp.config.tsのappConfigのprovidersに provideHttpClient() を追加すればよいだけでした。
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideHttpClient(),]
};
解決はしたけど結局仕組みがわかってないとダメだと思ったので、再度調査することに。
AngularのDIとServiceとProviderについて
公式のドキュメントを見るとちゃんと書いてありました。
DI(Dependency Injection)
依存オブジェクトの注入（DI）はAngularフレームワークの一部で、コンポーネントにサービスや他のリソースへのアクセスを提供するものです。
コンポーネントが使用するサービスのインスタンスを外部から受け取る（注入する）イメージ
ServiceとProvider
サーバーからデータを取得したり、コンポーネントのためにいい感じにデータ加工する処理をまとめたりなど、裏方的な役割を担ってくれるいいやつ。
ここで何でServiceを取り上げたのかというと、がっつりDIが出てくるからです。
サービスをコマンドで作成したとき、デフォルトでデコレーターに@Injectableがついてくるのですが、これがついてることでコンポーネントにインジェクションすることができます。
@Injectable({
providedIn: 'root'
})
export class ProductService {
@Injectable内に記述されている以下の設定はプロバイダーのメタデータのことです。
providedIn: 'root'
この記述はこのサービスのプロバイダーを ルートインジェクター に提供することを指定しています。
ルートインジェクターはAngularアプリケーション全体で使用されるサービスやそのほかの依存性を提供する仕組みのことです。そのサービスが必要になったときにインスタンスが存在するかどうかをチェックし存在しない場合、プロバイダーを使用して新しいインスタンスを生成して返します。この時、返す前にインジェクターに登録するらしい。
この画像はドキュメントからの引用です
このような仕組みのため、HttpClientを使う時はprovideHttpClient()をappConfigのprovidersに追加する必要があったということですね。
終わりに
ここまで読んでくださってありがとうございます!
まだまだ浅い理解ですが、もっと深い考察ができるよう学んでいきます！
Discussion