I've been developing an application that relies on auto-complete functionality. To begin, I installed some available templates using the dotnet command line tool and then selected a template directory before installing the Angular template.
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
dotnet new angular
During my development process, I discovered PrimeNG which seemed to be a good fit for my auto-completion needs. In order to use it, I attempted to install PrimeNG via npm with the following command:
npm install primeng
After running the npm install, a folder was created in the node_modules directory as expected.
Next, I followed the setup instructions for PrimeNG in the app.module.js file.
import { AutoCompleteModule } from primeng/components/autocomplete/autocomplete';
@NgModule({
...
imports: [ AutoCompleteModule, ... ]
});
In my HTML file, I included the directive along with the related search method and results list.
<p-autoComplete formControlName="city" (completeMethod)="search($event)"
[suggestions]="results"></p-autoComplete>
However, when adding the import statement in the @NgModule, the application failed to work and displayed an error that I couldn't find a solution for online.
An unhandled exception occurred while processing the request. Exception: Call to Node module failed with error: Error: Uncaught (in promise): TypeError: element.querySelector is not a function TypeError: element.querySelector is not a function
Interestingly, if I run the application without the import statement, it works fine. But if I add the import during runtime and save the file, the control renders correctly. Yet upon refreshing the browser, the issue reappears. It's puzzling because at times the code starts working again spontaneously after multiple refreshes, only to stop abruptly later on.