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-вызов, который затем отправляет результат в хранилище).