injectQueryParams Function Causes Runtime Error in Angular 17.2.3 / Ionic 7.7.2

[fiorelozere]

Description: I encountered a runtime error while using the injectQueryParams function in an Angular/Ionic application. The error appears when attempting to parse and use query parameters for pagination. Here's the error snapshot and the associated code snippet:

Error Snapshot:

Error Message:

ERROR Error: NG0601: `toSignal()` called with `requireSync` but `Observable` did not emit synchronously.

Code Snippet:

page = injectQueryParams(p => +p['page'] || 1);

Environment: Angular Version: 17.2.3 Ionic Version: 7.7.2

Expected Behavior: I expect injectQueryParams to correctly parse and inject the query parameter for the page, defaulting to 1 if the parameter is not present.

Actual Behavior: The application throws a runtime Error: NG0601, when attempting to navigate to the page that uses the injectQueryParams() method.

Steps to Reproduce: Navigate to the component using injectQueryParams. Ensure no page parameter is included in the URL. Observe the error in the console on component load.

[eneajaho]

Hello, thanks for opening this issue @fiorelozere .

This happens because in Ionic the router state is handled by Ionic and the ActivatedRoute.params or ActivatedRoute.queryParams observables don't emit synchronously -> breaking the implementation.

I don't think there's much we can do here.

[ajitzero]

Hi @eneajaho - How about providing a way to set requireSync as false? That should solve the Ionic part. It could remain true by default, and then Ionic developers can add a custom function in their projects independently to override the default. (An InjectionToken could be useful too.)

The required change would be to add a requireSync property in: https://github.com/nartc/ngxtension-platform/blob/373aa859c797b1e2de1e1aed194e39db78be4ba8/libs/ngxtension/inject-query-params/src/inject-query-params.ts#L15

The usage would be the developer's responsibility. Something like:

// Locally, per-app-basis, src/app/utils/overrides/injectIonicQueryParams.ts
import { injectQueryParams } from 'ngxtension/inject-query-params';

export const injectIonicQueryParams = <ReadT>(
    keyOrParamsTransform?: string | ((params: Params) => ReadT),
    options: QueryParamsOptions<ReadT, string, ReadT> = {},
) => injectQueryParams<ReadT>(keyOrParamsTransform, {
    requireSync: false,
    ...options,
});

// app.component.ts
import { injectIonicQueryParams as injectQueryParams } from '@/utils/overrides';

#params = injectQueryParams(...); // no change in usage since we can rename the import.

[eneajaho]

Hi @eneajaho - How about providing a way to set requireSync as false? That should solve the Ionic part. It could remain true by default, and then Ionic developers can add a custom function in their projects independently to override the default. (An InjectionToken could be useful too.)

The required change would be to add a requireSync property in:

https://github.com/nartc/ngxtension-platform/blob/373aa859c797b1e2de1e1aed194e39db78be4ba8/libs/ngxtension/inject-query-params/src/inject-query-params.ts#L15

The usage would be the developer's responsibility. Something like:

// Locally, per-app-basis, src/app/utils/overrides/injectIonicQueryParams.ts
import { injectQueryParams } from 'ngxtension/inject-query-params';

export const injectIonicQueryParams = <ReadT>(
  keyOrParamsTransform?: string | ((params: Params) => ReadT),
  options: QueryParamsOptions<ReadT, string, ReadT> = {},
) => injectQueryParams<ReadT>(keyOrParamsTransform, {
  requireSync: false,
  ...options,
});

// app.component.ts
import { injectIonicQueryParams as injectQueryParams } from '@/utils/overrides';

#params = injectQueryParams(...); // no change in usage since we can rename the import.

This makes sense!

Adding it now.

[eneajaho]

https://github.com/nartc/ngxtension-platform/pull/336

[Dafnik]

This can be closed, right? @eneajaho

[eneajaho]

Yes, thanks.