[vitest-angular]: NG0304: 'search' is not a known element

[jase88]

Please provide the environment you discovered this bug in.

If using the HTML search element within an angular component, there is always the following printed to the stderr: NG0304: 'search' is not a known element

For example:

  <search>
  <form>
    <input placeholder="Search" />
  </form>
</search>

example:
https://stackblitz.com/edit/github-juj4mknx?file=src%2Fapp%2Fapp.ts

Which area/package is the issue in?

vitest-angular

Description

If using nx with vitest-analog or a plain Angular project with @analogjs/vitest-angular, in both cases the error NG0304 occurs for search.

If using the default Angular Vitest integration the error does not occur.

Please provide the exception or error you saw

> stderr | src/app/app.spec.ts > App > should create the app
> NG0304: 'search' is not a known element (used in the 'App2' component template):
> 1. If 'search' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
>  2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[ajitzero]

This is a bug with @angular/core, which is used by Analog.js

Please report this in https://github.com/angular/angular

[jase88]

The support for the search element was added some time ago already to the angular compiler: angular/angular#54944

It works fine on angular side. It compiles fine while building and also works with the their vitest integration.

The error only occurs on Tests with vitest Analog in a nx workspace or on a Angular project with @analogjs/vitest-angular.

I'm unsure where the error is originated

[brandonroberts]

The fix here is to disable ngDevMode, which is what the Angular CLI does, but that breaks compatibility with other tests, so I'm not inclined to change the behavior as its just a false positive warning right now.

[jase88]

I agree that it’s technically just a warning, but in practice it becomes quite noisy. In our case it ends up spamming the entire test output, which makes it harder to spot real issues.

For now we’re working around it by using vitest-fail-on-console with the message silenced, but that’s obviously more of a band-aid than a real solution.

If there’s a recommended way to reliably disable or control ngDevMode in this setup, some hints or guidance on that would be very helpful. Thank you!

[brandonroberts]

Sure, in the vite.config.ts add this to the main config object(not inside the test object)

define: {
  'ngDevMode': 'false'
}