NgRx Data DefaultDataServiceConfig

Question

I just started to use NgRx Data on my project and I'm searching for a couple of hours and I can't find a solution for a problem that I'm facing with.

I'm trying to change the default root of calls by using DefaultDataServiceConfig like that:

app.module.ts

export const defaultDataServiceConfig: DefaultDataServiceConfig = {
  root: `${environment.apiUrl}/`,
};

@NgModel({
   ...
   providers: [
      {
         provide: DefaultDataServiceConfig
         useValue: defaultDataServiceConfig
      }
   ]
});

environment.ts

export const environment = {
   ...
   apiUrl: 'https://my-api.com/v1',
};

However, the call is going to localhost http://localhost:3000/client/list instead of going to my-api.com https://my-api.com/v1/client/list.

Is there something that I'm missing? I can't find any examples and ngrx.io documentation is a poor one.

score 7 · Answer 1 · answered Sep 21 '20 at 21:06

I faced the same problem.

Check the DefaultDataService Doc, the 4th argument in its constructor is optional and undefined by default. When you extend this class creating your own service pass the config argument like this:

@Injectable()
export class EmployersDataService extends DefaultDataService<Employer> {
  constructor(
    http: HttpClient,
    httpUrlGenerator: HttpUrlGenerator,
    config: DefaultDataServiceConfig
  ) {
    super('Employer', http, httpUrlGenerator, config);
  }
}

Then, the DefaultDataServiceConfig provided in app.module.ts will work.

score 1 · Answer 2 · answered May 11 '20 at 15:38

You should import it on the same level where you import EntityDataModule

@NgModule({
    declarations: [
        DataComponent,
    ],
    imports: [
        CommonModule,
        EntityDataModule.forRoot(entityConfig)
    ],
    providers: [
        {
            provide: DefaultDataServiceConfig,
            useValue: {
                root: environment.apiUrl,
            },
        }
    ],
    exports: [
        DataComponent,
    ],
})

If for whatever reason it doesn't work for you - you can provide your own HttpUrlGenerator, it resolves urls for every entity.

export abstract class HttpUrlGenerator {
  abstract entityResource(entityName: string, root: string): string;

  abstract collectionResource(entityName: string, root: string): string;

  abstract registerHttpResourceUrls(
    entityHttpResourceUrls?: EntityHttpResourceUrls
  ): void;
}

With HttpUrlGenerator is working as expected, but when I'm trying to use DefaultDataServiceConfig in app.module, the changes are not applied and I can't find out why. I'm trying to set DefaultDataServiceConfig because I don't want to set this in every service. — Sergiu Molnar, May 12 '20 at 07:42
I've tested it yesterday on a brand new angular 9 ngrx data 9 project and `DefaultDataServiceConfig` worked. That's why I assumed that import is wrong. Do you have other plugins that use ngrx/data? maybe one of them overrides the setting. As an option - put a breakpoint in HttpUrlGenerator` to see stack trace to find which data was injected to the service. Perhaps it brings light on the source of the problem. — satanTime, May 12 '20 at 07:58

NgRx Data DefaultDataServiceConfig

2 Answers2