"Can't bind to 'queryParams' since it isn't a known property of 'a'" despite using createRoutingFactory #486

AnthonyLenglet · 2021-09-27T10:37:14Z

AnthonyLenglet
Sep 27, 2021

Hi !

I've been using spectator to add tests to one of our existing project and I'm currently stumbling on an error related to queryParams in this component:

<article class="wrapper">
  <header>
    <nav>
      <ul>
        <li mat-ripple routerLinkActive="active">
          <a routerLink="." [queryParams]="{ pipeline: 'todo' }">
            To do
          </a>
        </li>
        <li mat-ripple routerLinkActive="active">
          <a routerLink="." [queryParams]="{ pipeline: 'under-review' }">
            Under Review
          </a>
        </li>
        <li mat-ripple routerLinkActive="active">
          <a routerLink="." [queryParams]="{ pipeline: 'reviewed' }">
            Reviewed
          </a>
        </li>
      </ul>
    </nav>
  </header>
</article>

In my tests I am creating it using createRoutingFactory in order to add the routing functionality (there is a data property in the factory option, but I removed it here among other things in order to keep this to the point):

  let spectator: Spectator<ViewComponent>;
  const createComponent = createRoutingFactory({
    component: ViewComponent,
    queryParams: {
      pipeline: 'todo',
    },
  });

  beforeEach(() => (spectator = createComponent()));

  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });

Here is the output I am getting:

✔ Browser application bundle generation complete.
ERROR: 'NG0303: Can't bind to 'queryParams' since it isn't a known property of 'a'.'
Chrome Headless 93.0.4577.82 (Mac OS 10.15.7): Executed 24 of 52 SUCCESS (0 secs / 0.41 secs)
ERROR: 'NG0303: Can't bind to 'queryParams' since it isn't a known property of 'a'.'
Chrome Headless 93.0.4577.82 (Mac OS 10.15.7): Executed 24 of 52 SUCCESS (0 secs / 0.41 secs)
ERROR: 'NG0303: Can't bind to 'queryParams' since it isn't a known property of 'a'.'
Chrome Headless 93.0.4577.82 (Mac OS 10.15.7): Executed 24 of 52 SUCCESS (0 secs / 0.41 secs)
Chrome Headless 93.0.4577.82 (Mac OS 10.15.7): Executed 25 of 52 (skipped 27) SUCCESS (0.539 secs / 0.444 secs)
TOTAL: 25 SUCCESS
TOTAL: 25 SUCCESS

So at this point I'm stumped on how to fix those errors, I though about importing "routerTestingModule" as well, but that gave me another error: Cannot read properties of null (reading 'startsWith')
Besides, am I correct in my assumption that an extended RouterTestingModule is pretty much just being imported when creating a component factory through createRoutingFactory ? based on this I would assume that this shouldn't be needed unless the stubs are disabled