Angular独立模式下Ngrx-Entity未调用已定义DataService问题

问题背景 #

在Angular 17独立模式项目中使用NgRx Data时，为User实体创建的自定义UserDataMockService始终未被触发，移除该服务后会出现默认HTTP请求失败的错误，说明系统仍在使用默认DataService而非自定义实现。

问题原因 #

在独立模式下，NgRx Data无法自动识别通过组件提供者直接注册的自定义DataService，必须通过NgRx的实体数据配置明确绑定实体与对应的DataService。

修复步骤 #

1. 在实体配置中注册自定义DataService
   修改你的实体配置文件（比如entity.config.ts），在provideEntityData的配置里添加dataServices映射，把User实体指向你的模拟服务：

   import { provideEntityData, EntityDataConfig } from '@ngrx/data';
   import { USER_ENTITY_KEY } from './user.entity';
   import { UserDataMockService } from './user-data-mock.service';
   
   const entityConfig: EntityDataConfig = {
     entityMetadata: {
       [USER_ENTITY_KEY]: {
         // 保留你原有的实体元数据配置
       }
     },
     // 新增映射关系，绑定实体到自定义DataService
     dataServices: {
       [USER_ENTITY_KEY]: UserDataMockService
     }
   };
   
   export const provideAppEntityStore = () => [
     provideEntityData(entityConfig),
     // 其他NgRx相关提供者（如store、effects等）
   ];
   

2. 调整组件提供者配置
   移除AppComponent提供者中直接声明的UserDataMockService，改用NgRx提供的provideEntityCollectionService注册UserEntityService：

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     standalone: true,
     providers: [
       // 通过NgRx方法注册实体服务，确保关联到自定义DataService
       provideEntityCollectionService(UserEntityService)
     ],
     imports: [/* 你的组件导入 */]
   })
   export class AppComponent implements OnInit {
     constructor(private userEntityService: UserEntityService) {}
   
     ngOnInit(): void {
       // 现在调用getAll会触发自定义服务的方法
       this.userEntityService.getAll();
     }
   }
   

3. 确保全局提供者正确导入
   在main.ts中，将实体Store提供者添加到bootstrap的providers数组：

   bootstrapApplication(AppComponent, {
     providers: [
       provideAppEntityStore(),
       // 其他全局提供者
     ]
   });
   

调整完成后，NgRx Data就能正确识别并使用UserDataMockService，调用getAll时会输出你添加的日志，并返回模拟数据。

内容的提问来源于stack exchange，提问作者Nico L.