Путать с Angular Внедрение зависимостей с ленивым модулем

Question

Я читал о Angular Внедрение зависимостей, но меня очень смущает очень простой пример с лениво загруженным модулем.

Я создал новое приложение angular и добавил ленивый модуль - UsersModule. Вот структура приложения:

|-- src
|   |-- app
|   |   |-- app.component.css
|   |   |-- app.component.html
|   |   |-- app.component.ts
|   |   |-- app.module.ts
|   |   |-- user.service.ts
|   |   `-- users
|   |       |-- user.service.ts
|   |       |-- users
|   |       |   |-- users.component.css
|   |       |   |-- users.component.html
|   |       |   `-- users.component.ts
|   |       `-- users.module.ts

Как вы можете видеть, я создал два UserService, пытающихся внедрить каждый из них и попрактиковаться в DI с ленивым модулем. Как я правильно понял, angular использует дерево инжекторов для разрешения зависимостей, и я ожидал следующее дерево инжекторов:

 root
   |
 AppModule
   |
 AppComponent
   |
 UsersModule
   |
 UsersComponent

Также я ожидал, что получу определенные UserService (в UsersComponent), в зависимости от которых один я буду импортировать (../user.service или ../../users.component). Но поведение меня очень смущает. Если я предоставляю UserService в AppModule и объявляю зависимость в UsersComponent, все в порядке и работает, но если я предоставляю UserService в UsersModule, я получаю ошибку (нет поставщика для UserService). Исправлена ​​ошибка, если я объявлял UserService (users / user.service.ts) с @Injectable({ providedIn: 'root' }). Также я заметил, что без @Injectable() все работает нормально, так зачем это нужно?

Реальный код на самом деле не нужен. Я просто создал приложение, создал ленивый модуль UsersModule, создал компонент UsersComponent в ленивом модуле, создал UserService в разных модулях и объявил зависимость от него в UsersComponent. Пожалуйста, вы можете сказать мне, что я неправильно понял?

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { UserService } from './user.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) }
    ])
  ],
  // providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsersComponent } from './users/users.component';
import { RouterModule } from '@angular/router';
import { UserService } from './user.service';

@NgModule({
  declarations: [UsersComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: UsersComponent }
    ])
  ],
  // providers: [UserService]
})
export class UsersModule { }