Angular singleton-сервис

Ошибка довольно очевидна. ЕСЛИ вы делаете providedIn: 'root', тогда ваша служба регистрируется на RootInjector. И, следовательно, он в основном доступен для использования во всем приложении без необходимости вручную добавлять его в массив providers каждого модуля, в котором вы хотите использовать эту службу.

Но теперь, когда вы удалили providedIn: 'root' из декоратора @Injectable, он будет доступен только для модулей, в которые вы добавляете его в массив providers этих модулей. Или он будет доступен модулям, которые импортируют модули, для которых служба добавлена ​​в массив providers.

Вот Образец StackBlitz, который поможет вам лучше понять это.

Просто чтобы описать:

1. У меня есть 3 модуля: AppModule, NewModule и NotImportedModule.
2. Я буду использовать сервисы, написанные в NewModule и NotImportedModule в AppModuleAppComponent.
3. NewModuleSampleService добавляется к массиву providesNewModule, а NewModule добавляется к массиву importsAppModule. Вот почему я могу использовать SampleService в AppComponent.
4. NotImportedModule не добавлен в массив importsAppModule, но AnotherService - это providedIn: 'root'. Следовательно, я могу использовать его в AppModule.

Это означало бы, что AnotherService будет доступен для использования во всем приложении, поскольку он зарегистрирован в RootInjector, поскольку мы использовали providedIn: 'root' на нем.

Но поскольку SampleService НЕ был providedIn: 'root', а был добавлен в массив providersNewModule для использования его в AppModule, нам пришлось добавить NewModule в массив importsAppModule.

Надеюсь, этот пример имеет больше смысла.