2021年2月13日

Angular の Service の提供範囲

Angular の Service の提供範囲を 3 回も調べてしまったのでメモ。

サービスの提供範囲

@Injectable({
  provideIn: 'root',
})

とするとアプリケーション全体で 1 つのインスタンスが使用されます。

ng generate serivce services/my-service

で作成されるサービスは provideIn: 'root' が自動で入るのでこれが基本形のよう。アプリケーション全体で同じものを参照できるので、状態管理などに最適です。

ちなみに、下記の @NgModule() に書くよりも provideIn することが推奨されています。ツリーシェイキングによりバンドルサイズを小さくできるそうです。
トップレベルの @NgModule() に書けば結局同じ…というわけではないようです。

@NgModule() の providers に書くと @NgModule() 内のコンポーネント全体で 1 つのインスタンスが使用されます。

@NgModule({
  ...
  providers: [
    MyService
  ]
})

@Component() の providers に書くとコンポーネントのインスタンスと対になったインスタンスが作成されます。

@Component({
  selector:    'app-my-component',
  templateUrl: './my-component.component.html',
  providers:  [ MyService ]
})

毎回ハマるのはサービスの依存関係なので、そちらもそのうち書きたい。