Ngrx-Entity не использует определенный DataService в автономном подходе Angular

В настоящее время я пытаюсь настроить репозиторий Angular v17, который использует Ngrx-Store с Ngrx-Entity и Ngrx-Data. Я использую автономный подход. Для этого я следовал рекомендациям, изложенным в Github Ngrx Issue #3934.

Проблема в том, что зарегистрированный DataService не вызывается должным образом.

У меня есть EntityService для User-Entity, который выглядит следующим образом:

      @Injectable()
export class UserEntityService extends EntityCollectionServiceBase<User> {
  constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
    super(USER_ENTITY_KEY, serviceElementsFactory);
  }
}

И у меня есть Mock-Environment, в котором я хочу использовать собственный UserDataMock , чтобы получать пользовательские макеты из пользовательского файла JSON. Однако для простоты в настоящее время я обычно внедряю и регистрирую этот сервис без проверки текущей среды.

      @Injectable()
export class UserDataMockService extends DefaultDataService<User> {
  constructor(http: HttpClient, httpUrlGenerator: HttpUrlGenerator) {
    super(USER_ENTITY_KEY, http, httpUrlGenerator);
  }

  override getAll(): Observable<User[]> {
    console.log('UserDataMockService#getAll called');
    return of([
      {
        id: 1,
        firstName: 'Max',
        lastName: 'Mustermann',
      },
      {
        id: 2,
        firstName: 'Lisa',
        lastName: 'Webb',
      },
    ]);
  }
}

Я регистрирую этих двоих как поставщиков моего AppComponent:

      @Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe, JsonPipe],
  template: `
    <h1>ngrx-data not using mock service</h1>
    <p>
      {{ allUsers$ | async | json }}
    </p> 

  `,
})
export class App {
  allUsers$: Observable<User[]>;

  constructor(userEntityService: UserEntityService) {
    this.allUsers$ = userEntityService.getAll();
  }
}

bootstrapApplication(App, {
  providers: [
    provideStore(),
    provideEntityData(entityConfig, withEffects()),
    provideEffects(),
    provideHttpClient(),

    UserEntityService,
    UserDataMockService,

    {
      provide: ENVIRONMENT_INITIALIZER,
      useValue() {
        const entityDataService = inject(EntityDataService);
        entityDataService.registerService(
          USER_ENTITY_KEY,
          inject(UserDataMockService)
        );
      },
      multi: true,
    },
  ],
}).catch(console.error);

... и это моя конфигурация объекта :

      const entityMetadata: EntityMetadataMap = {
  [USER_ENTITY_KEY]: {},
};

const pluralNames = {};

export const entityConfig: EntityDataModuleConfig = {
  entityMetadata,
  pluralNames,
};

Теперь при запуске приложенияuserDataMockService.getAllследует вызвать и, таким образом, войти в консоль. Но это не так. Но он каким-то образом распознает, что для пользовательского объекта существует другой dataService, поскольку удаление UserDataMockService у поставщиков (а также без регистрации) приводит к ошибке, возникающей во время выполнения, потому что, конечно, нет бэкэнда и http-вызов не увенчался успехом.

В моем компоненте приложения я попытался заменитьthis.allUsers$ = userEntityService.getAll();сthis.allUsers$ = userEntityService.entities$;, но без какого-либо эффекта(1).

Я создал Stackblitz , который воспроизводит это поведение.

Любая помощь приветствуется!


(1) что довольно ясно, поскольку, насколько я знаю, самый первый вызов обоих должен привести к одним и тем же действиям (http-вызов, который затем отправляет результат в хранилище).

0 ответов

Другие вопросы по тегам