Types of property 'serialize' are incompatible

[pszalanski]

I am getting an error after setting up query parameter bindings:

Types of property 'serialize' are incompatible.
    Type 'ParamSerializer<string | null>' is not assignable to type 'ParamSerializer<unknown>'.
      Type 'unknown' is not assignable to type 'string | null'.

21                  [queryParam]="searchParam">
                     ~~~~~~~~~~

  src/app/pages/component.ts:11:16
    11   templateUrl: './component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component Component.

This is the setup of the parameter:

class Component {
  searchParam: QueryParam<string>;

  constructor() {
    this.searchParam = qb.stringParam('search');
  }

I followed the example in the documentation.

My node_modules:

+-- __ngcc_entry_points__.json@ extraneous
+-- @angular-builders/jest@13.0.4
+-- @angular-devkit/build-angular@14.2.10
+-- @angular/animations@14.2.12
+-- @angular/cdk@14.2.7
+-- @angular/cli@13.3.10
+-- @angular/common@14.2.12
+-- @angular/compiler-cli@14.2.12
+-- @angular/compiler@14.2.12
+-- @angular/core@14.2.12
+-- @angular/forms@14.2.12
+-- @angular/material@14.2.7
+-- @angular/platform-browser-dynamic@14.2.12
+-- @angular/platform-browser@14.2.12
+-- @angular/router@14.2.12
+-- @azure/msal-angular@2.5.3
+-- @azure/msal-browser@2.33.0
+-- @ngneat/helipopper@6.5.2
+-- @ngneat/overview@4.1.0
+-- @ngneat/spectator@10.0.1
+-- @ngqp/core@14.1.0
+-- @testing-library/angular@11.0.4
+-- @testing-library/jest-dom@5.16.5
+-- @testing-library/user-event@14.4.3
+-- @types/jest@28.1.8
+-- @types/luxon@2.4.0
+-- @types/node@12.20.55
+-- animate.css@4.1.1
+-- bulma-switch-control@1.2.2
+-- bulma@0.9.4
+-- jest-environment-jsdom@28.1.3
+-- jest-preset-angular@12.2.6
+-- jest@28.1.3
+-- luxon-angular@5.2.0
+-- luxon@3.2.1
+-- ng-mocks@14.6.0
+-- ngx-localstorage@3.5.0
+-- rxjs@7.4.0
+-- ts-jest@28.0.8
+-- ts-node@10.9.1
+-- tslib@2.5.0
+-- tslint@6.1.3
+-- typescript@4.8.4
`-- zone.js@0.11.8

[Airblader]

It's possible that this has to do with Angular's recent typing improvements; as a workaround, can you try to use QueryParamGroup instead of binding a standalone param?

[pszalanski]

Then I get this:

this.searchGroup.add('firmware_name', this.firmwareNameParam);

The error:

TS2345: Argument of type 'QueryParam<string>' is not assignable to parameter of type 'QueryParam<unknown> | MultiQueryParam<unknown> | PartitionedQueryParam<unknown, unknown[]>'.   
Type 'QueryParam<string>' is not assignable to type 'QueryParam<unknown>'.     
Types of property 'serialize' are incompatible.      
 Type 'ParamSerializer<string | null>' is not assignable to type 'ParamSerializer<unknown>'.        
 Type 'unknown' is not assignable to type 'string | null'.